Question

这应该很简单。如何将自己的颜色分配给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);
      }

Answer 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"
  }
]

Answer 2

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

Answer 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');

}

...然后在绘制图表后，添加一个＆＃34; ready＆＃34;这些其他事件监听器可以在任何时候运行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);

的问题：

在某些情况下似乎会有一些颜色切换，因为你在它上面鼠标。

自定义Google Gantt Charts中的条形颜色

3 个答案:

的问题：