首页 文章

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

提问于
浏览 次
7

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

3 回答

  • 0

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

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

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

    This is the default palette that the chart uses:

    [
  {
    "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"
  }
]
    回复于
  • 1

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

    回复于
  • 2

    这是相当古老的，但万一有人需要这样做...不是一个超级优雅的解决方案，但它的工作原理 .

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

}

    ...然后在绘制图表后，添加“ready”和其他事件侦听器，以便在任何时候发生任何事情时运行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);

    问题：

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

    回复于

相关问题