自定义 Google 甘特图中的条形颜色

Posted 2023-05-08

【中文标题】自定义 Google 甘特图中的条形颜色

【英文标题】：Customize the bar colors in Google Gantt Charts

【发布时间】：2016-05-11 22:54:50

【问题描述】：

这应该很简单。如何为Google Gantt Charts 中的条分配我自己的颜色？甘特图忽略了我的颜色并自动将蓝色、红色和黄色颜色（按此顺序）分配给条形图，我似乎无法找出问题所在。如果我在这里遗漏了什么或者目前根本不支持，有人可以指出吗？

这是我所拥有的：

function drawChart() 

      var data = new google.visualization.DataTable();
      data.addColumn( type: 'string', id: 'task_id' , 'Task ID');
      data.addColumn( type: 'string', id: 'task_name' , 'Task Name');
      data.addColumn( type: 'string', id: 'resource' , 'Resource');
      data.addColumn( type: 'date', id: 'start_date' , 'Start Date');
      data.addColumn( type: 'date', id: 'end_date' , 'End Date');
      data.addColumn( type: 'number', id: 'duration' , 'Duration');
      data.addColumn( type: 'number', id: 'percent_complete' , 'Percent Complete');
      data.addColumn( type: 'string', id: 'dependencies' , 'Dependencies');

      data.addRows([
        ['Research', 'Find sources', null,
         new Date(2015, 0, 1), new Date(2015, 0, 5), null,  100,  null],
        ['Write', 'Write paper', 'write',
         null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'],
        ['Cite', 'Create bibliography', 'write',
         null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, 'Research'],
        ['Complete', 'Hand in paper', 'complete',
         null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'],
        ['Outline', 'Outline paper', 'write',
         null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Research']
      ]);


      var colors = [];
      var colorMap = 
          write: '#e63b6f',
          complete: '#19c362'
      
      for (var i = 0; i < data.getNumberOfRows(); i++) 
          colors.push(colorMap[data.getValue(i, 2)]);
      

        var options = 
          height: 275,
          gantt: 
            criticalPathEnabled: true,
            criticalPathStyle: 
              stroke: '#e64a19',
              strokeWidth: 5
            
          ,
          colors: colors
        ;

        var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
        chart.draw(data, options);
      

【问题讨论】：

没有条形颜色选项。甘特图处于测试阶段，希望在下一个版本中......

这方面有什么消息吗？好像所有的答案都过时了！

【参考方案1】：

有一个选项gantt.palette 接受一个对象数组。

var options = 
  gantt: 
    palette: [
      
        "color": "#cccccc",
        "dark": "#333333",
        "light": "#eeeeee"
      
    ]
  

通过提供您自己的对象数组，您可以覆盖默认调色板。

这是图表使用的默认调色板：

[
  
    "color": "#5e97f6",
    "dark": "#2a56c6",
    "light": "#c6dafc"
  ,
  
    "color": "#db4437",
    "dark": "#a52714",
    "light": "#f4c7c3"
  ,
  
    "color": "#f2a600",
    "dark": "#ee8100",
    "light": "#fce8b2"
  ,
  
    "color": "#0f9d58",
    "dark": "#0b8043",
    "light": "#b7e1cd"
  ,
  
    "color": "#ab47bc",
    "dark": "#6a1b9a",
    "light": "#e1bee7"
  ,
  
    "color": "#00acc1",
    "dark": "#00838f",
    "light": "#b2ebf2"
  ,
  
    "color": "#ff7043",
    "dark": "#e64a19",
    "light": "#ffccbc"
  ,
  
    "color": "#9e9d24",
    "dark": "#827717",
    "light": "#f0f4c3"
  ,
  
    "color": "#5c6bc0",
    "dark": "#3949ab",
    "light": "#c5cae9"
  ,
  
    "color": "#f06292",
    "dark": "#e91e63",
    "light": "#f8bbd0"
  ,
  
    "color": "#00796b",
    "dark": "#004d40",
    "light": "#b2dfdb"
  ,
  
    "color": "#c2185b",
    "dark": "#880e4f",
    "light": "#f48fb1"
  
]

【讨论】：

感谢您的支持 - 效果很好，但我在 Google 文档中找不到！

你知道每个参数的含义吗？从玩弄它，“颜色”似乎是未填充条的颜色。 “深色”是用来填充它的颜色，但我似乎无法弄清楚“浅色”是什么

【参考方案2】：

我想出了一个 hacky 方法。您基本上必须监听图表触发的每个事件，并使用为图表着色的函数覆盖它们。

【讨论】：

您是否介意分享一下您是如何做到这一点的代码 sn-p。谢谢

【参考方案3】：

这已经很老了，但以防万一有人需要这样做......不是一个超级优雅的解决方案，但它确实有效。

function changeColors() 
$("text[fill='#5e97f6']").attr('fill',"#0099D8"); // Left Text
$("rect[fill='#5e97f6']").attr('fill',"#0099D8"); // Full bar
$("path[fill='#2a56c6']").attr('fill', '#006B99'); // Percentage completed
$("rect[fill='#2a56c6']").attr('fill', '#0099D8'); // Hover Full Bar
$("path[fill='#204195']").attr('fill', '#006B99'); // Hover Percentage

// Change Old red to new Red
$("text[fill='#db4437']").attr('fill',"#D41647");
$("rect[fill='#db4437']").attr('fill',"#D41647");
$("path[fill='#a52714']").attr('fill', '#A21135');
$("rect[fill='#a52714']").attr('fill', '#D41647');
$("path[fill='#7c1d0f']").attr('fill', '#A21135');

// Change Old Yellow to new Yellow
$("text[fill='#f2a600']").attr('fill',"#FCB813");
$("rect[fill='#f2a600']").attr('fill',"#FCB813");
$("path[fill='#ee8100']").attr('fill', '#C98e03');
$("rect[fill='#ee8100']").attr('fill', '#FCB813');
$("path[fill='#b36100']").attr('fill', '#C98e03');

...然后在您绘制图表后，添加“就绪”和这些其他事件侦听器，以便在发生任何事情时运行 changeColors。

chart.draw(data, options);
google.visualization.events.addListener(chart, 'ready', changeColors);
google.visualization.events.addListener(chart, 'onmouseover', changeColors);
google.visualization.events.addListener(chart, 'onmouseout', changeColors);
google.visualization.events.addListener(chart, 'select', changeColors);
google.visualization.events.addListener(chart, 'error', changeColors);
google.visualization.events.addListener(chart, 'click', changeColors);
google.visualization.events.addListener(chart, 'animationfinish', changeColors);

问题：

在某些情况下，当您将鼠标悬停在其上时，颜色似乎会发生一些切换。

【讨论】：

啊！会给它一个旋转。谢谢！

>.