Change the bar color in gantt chat based on value

后端 未结 1 1096
猫巷女王i
猫巷女王i 2021-01-22 16:56

I would like to change the color of the bar in the gantt chart based in the value I am passing. When Percent done equals of higher than 100 the bar should be red. I

1条回答
  •  小蘑菇
    小蘑菇 (楼主)
    2021-01-22 17:29

    there aren't any standard options to change bar color by value

    but you can change the chart elements manually

    recommend using a MutationObserver as the chart will try to change the bar color back to the default, on any interactivity such as hover or select

    the order of the bars should follow the rows in the data

    see following working snippet...

    google.charts.load('current', {
      callback: drawChart,
      packages: ['gantt']
    });
    
    function drawChart() {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Task ID');
      data.addColumn('string', 'Task Name');
      data.addColumn('string', 'Resource');
      data.addColumn('date', 'Start Date');
      data.addColumn('date', 'End Date');
      data.addColumn('number', 'Duration');
      data.addColumn('number', 'Percent done');
      data.addColumn('string', 'Dependencies');
    
      data.addRows([
    
      ['C10', 'C10', 'Xa', new Date(2015, 3, 20), new Date(2016, 8, 30), null, 109, null],
      ['C15', 'C15', 'Xa', new Date(2016, 5, 2), new Date(2016, 9, 31), null, 111, null],
      ['C20', 'C20', 'Xa', new Date(2016, 8, 15), new Date(2016, 10, 25), null, 88, null],
      ['C21', 'C21', 'Xa', new Date(2016, 8, 1), new Date(2016, 10, 25), null, 90, null]
      ]);
    
      var options = {
        width: '100%',
        hAxis: {
          textStyle: {
            fontName: ['Roboto Condensed']
          }
        },
        gantt: {
          labelStyle: {
            fontSize: 12,
            color: '#757575'
          }
        }
      };
    
      var container = document.getElementById('chart_div');
      var chart = new google.visualization.Gantt(container);
    
      // monitor activity, change bar color
      var observer = new MutationObserver(function (mutations) {
        Array.prototype.forEach.call(container.getElementsByTagName('path'), function(bar, index) {
          if (data.getValue(index, 6) > 100) {
            bar.setAttribute('fill', '#a52714');
          }
        });
      });
      observer.observe(container, {
        childList: true,
        subtree: true
      });
    
      chart.draw(data, options);
    }
    
    

    EDIT

    it appears when there is partial completion, the "bar" is split with two colors
    the lighter shade being represented by a 'rect' element
    you could change this to a lighter shade of red
    use the Y coordinate of the 'path' to find the correct 'rect'

    also, need to sort the data in the same order as displayed in the chart...

    see following working snippet...

    google.charts.load('current', {
      callback: drawChart,
      packages: ['gantt']
    });
    
    function drawChart() {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Task ID');
      data.addColumn('string', 'Task Name');
      data.addColumn('string', 'Resource');
      data.addColumn('date', 'Start Date');
      data.addColumn('date', 'End Date');
      data.addColumn('number', 'Duration');
      data.addColumn('number', 'Percent done');
      data.addColumn('string', 'Dependencies');
    
      data.addRows([
        ['C10', 'C10', 'Xa', new Date(2016, 2, 23), new Date(2016, 10, 30), null, 94.84, null],
        ['C15', 'C15', 'Xa', new Date(2016, 4, 1), new Date(2016, 11, 29), null, 82.64, null],
        ['C20', 'C20', 'Xa', new Date(2016, 7, 1), new Date(2016, 10, 25), null, 93.1, null],
        ['C25', 'C25', 'Xa', new Date(2016, 3, 11), new Date(2016, 10, 25), null, 96.49, null],
        ['C30', 'C30', 'Xa', new Date(2016, 9, 3), new Date(2017, 1, 28), null, 30.41, null],
        ['C35', 'C35', 'Xa', new Date(2016, 3, 8), new Date(2016, 5, 24), null, 113.78, null]
      ]);
      data.sort([{column: 3}]);
    
      var w = window,
        d = document,
        e = d.documentElement,
        g = d.getElementsByTagName('body')[0],
        xWidth = w.innerWidth || e.clientWidth || g.clientWidth,
        yHeight = w.innerHeight|| e.clientHeight|| g.clientHeight;
    
      var options = {
        height: 600,
        width: "100%",
        hAxis: {
          textStyle: {
            fontName: ["Roboto Condensed"]
          }
        },
        gantt: {
          labelStyle: {
          fontName: ["Roboto Condensed"],
          fontSize: 12,
          color: '#757575'
          }
        }
      };
      var container = document.getElementById('chart_div');
      var chart = new google.visualization.Gantt(container);
    
      // monitor activity, change bar color
      var observer = new MutationObserver(function (mutations) {
        Array.prototype.forEach.call(container.getElementsByTagName('path'), function(bar, index) {
          var barY;
          if (data.getValue(index, 6) > 100) {
            bar.setAttribute('fill', '#b71c1c');
            barY = bar.getAttribute('d').split(' ')[2];
            Array.prototype.forEach.call(container.getElementsByTagName('rect'), function(bar) {
              if (bar.getAttribute('y') === barY) {
                bar.setAttribute('fill', '#f44336');
              }
            });
          }
        });
      });
      observer.observe(container, {
        childList: true,
        subtree: true
      });
    
      chart.draw(data, options);
    }
    
    

    0 讨论(0)
提交回复
热议问题