根据值更改甘特聊中的栏颜色 [英] Change the bar color in gantt chat based on value

查看：172
本文介绍了根据值更改甘特聊中的栏颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想根据我传递的值更改甘特图中条的颜色。当完成百分比等于高于100时，该栏应为红色。这可能吗？



https://jsfiddle.net/ 1cez1duf / 

  google.charts.load（'current'，{'packages'：['gantt']] ，'language'：'pt-br'}）; 
 google.charts.setOnLoadCallback（drawChart）; 
 
函数drawChart（）{
 
 var data = new google.visualization.DataTable（）; 
 data.addColumn（'string'，'Task ID'）; 
 data.addColumn（'string'，'任务名称'）; 
 data.addColumn（'string'，'Resource'）; 
 data.addColumn（'date'，'开始日期'）; 
 data.addColumn（'date'，'结束日期'）​​; 
 data.addColumn（'number'，'Duration'）; 
 data.addColumn（'数字'，'完成百分比'）; 
 data.addColumn（'string'，'Dependencies'）; 
 
 data.addRows（[
 ['C10'，'C10'，'Xa'，新日期（2015,3,20），新日期（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'，新日期（2016,8,15），新日期（2016,10,25），null，88，null]，
 [ 'C21'，'C21'，'Xa'，新日期（2016,8,1），新日期（2016,10,25），null，90，null] 
]）; 
 
 var options = {
 width：100％，
 hAxis：{
 textStyle：{
 fontName：[Roboto Condensed] 
 
 
 gantt：{
 labelStyle：{
 fontSize：12，
 color：'＃757575'
} 
} 
}; 
 
 var chart = new google.visualization.Gantt（document.getElementById（'chart_div'））; 
 chart.draw（data，options）;


解决方案

没有任何标准根据值更改栏颜色的选项



但您可以手动更改图表元素



建议使用 MutationObserver ，因为图表会尝试在任何交互性（例如悬停或选择）上将条形颜色更改回默认值。

栏的顺序应该在 data



中的行之后，请参阅下面的工作代码片段...



google.charts.load（'current'，{callback：drawChart，packages：[ 'gantt']}）; function drawChart（）{var data = new google.visualization.DataTable（）; data.addColumn（'string'，'Task ID'）; data.addColumn（'string'，'任务名称'）; data.addColumn（'string'，'Resource'）; data.addColumn（'date'，'开始日期'）; data.addColumn（'date'，'结束日期'）​​; data.addColumn（'number'，'Duration'）; data.addColumn（'数字'，'完成百分比'）; data.addColumn（'string'，'Dependencies'）; data.addRows（[['C10'，'C10'，'Xa'，新日期（2015,3,20），新日期（2016,8,30），null，109，null]，['C15' 'C15'，'Xa'，新日期（2016,5,2），新日期（2016,9,31），null，111，null]，['C20'，'C20'，'Xa'，新日期（2016,8,15），新日期（2016,10,25），null，88，null]，['C21'，'C21'，'Xa'，新日期（2016,8,1），新日期（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）; //监视活动，更改栏颜色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（容器，{childList：true，subtree：true}）; chart.draw（data，options）;}

< script>< / div>< / script> / b>



















p>当部分完成时出现，酒吧被两种颜色分开

由'rect'元素表示的较浅的阴影

您可以将其更改为较浅的红色阴影

使用'路径'的Y坐标查找正确的'rect'



还需要按照图表中显示的相同顺序排序数据...



请参阅以下工作片段... 

  google.charts.loa d（'current'，{callback：drawChart，packages：['gantt']}）; function drawChart（）{var data = new google.visualization.DataTable（）; data.addColumn（'string'，'Task ID'）; data.addColumn（'string'，'任务名称'）; data.addColumn（'string'，'Resource'）; data.addColumn（'date'，'开始日期'）; data.addColumn（'date'，'结束日期'）​​; data.addColumn（'number'，'Duration'）; data.addColumn（'数字'，'完成百分比'）; data.addColumn（'string'，'Dependencies'）; data.addRows（[['C10'，'C10'，'Xa'，新日期（2016,2,23），新日期（2016,10,30），null，94.84，null]，['C15'， 'C15'，'Xa'，新日期（2016,4,1），新日期（2016,11,29），null，82.64，null]，['C20'，'C20'，'Xa'，新日期（2016年7月1日），新日期（2016,10,25），null，93.1，null]，['C25'，'C25'，'Xa'，新日期（2016,3,11） （2016,10,25），null，96.49，null]，['C30'，'C30'，'Xa'，新日期（2016,9,3），新日期（2017,1,28） （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 ，颜色：'＃757575'}}}; var container = document.getElementById（'chart_div'）; var chart = new google.visualization.Gantt（container）; //监视活动，更改栏颜色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'）.span（''）[2]; Array.prototype.forEach .call（container.getElementsByTagName（'rect'），function（bar）{if（bar.getAttribute（'y'）=== barY）{bar.setAttribute（'fill'，'＃f44336'）;}}） ;}}）;}）; observer.observe（容器，{childList：true，subtree：true}）; chart.draw（data，options）;}

< script>< / div>< / script> / pre>


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. Is it possible?

https://jsfiddle.net/1cez1duf/

google.charts.load('current', {'packages':['gantt'], 'language': 'pt-br'});
google.charts.setOnLoadCallback(drawChart);

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 chart = new google.visualization.Gantt(document.getElementById('chart_div'));
    chart.draw(data, options);
}

解决方案

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);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

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);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

这篇关于根据值更改甘特聊中的栏颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆