如何更改条形颜色(Google Chart Visualization)

时间:2015-10-30 20:15:01

标签: javascript google-visualization

我无法更改此列图表颜色。现在它显示默认的蓝色而不是青色。

这是现场:http://leighmckenzie.com/ballet-analysis/#when

  google.load("visualization", "1.1", {packages:["bar"]});
  google.setOnLoadCallback(drawStuff);

  function drawStuff() {
    var data = new google.visualization.arrayToDataTable([
      ['Day of the Week', 'Number of Orders'],
      ["Monday", 5458],
      ["Tuesday", 4006],
      ["Wednesday", 3686],
      ["Thursday", 3675],
      ["Friday", 4006],
      ["Saturday", 3379],
      ["Sunday", 3395],

    ]);

    var options = {
      series: { 0: {color: '#00ada2'} },
      width: 300,
      height: 380,
      legend: { position: 'none' },
      bar: { groupWidth: "80%" }
    };

    var chart = new google.charts.Bar(document.getElementById('orders-during-week'));
    // Convert the Classic options to Material options.
    chart.draw(data, google.charts.Bar.convertOptions(options));
  };

1 个答案:

答案 0 :(得分:1)

您可以指定与系列数组匹配的颜色数组。

google.load("visualization", "1.1", {packages:["bar"]});


google.setOnLoadCallback(drawStuff);

  function drawStuff() {
    var data = new google.visualization.arrayToDataTable([
      ['Day of the Week', 'Number of Orders'],
      ["Monday", 5458],
      ["Tuesday", 4006],
      ["Wednesday", 3686],
      ["Thursday", 3675],
      ["Friday", 4006],
      ["Saturday", 3379],
      ["Sunday", 3395],

    ]);

    var options = {
      width: 300,
      height: 380,
      legend: { position: 'none' },
      bar: { groupWidth: "80%" },
      colors: ['#00ada2']
    };

    var chart = new google.charts.Bar(document.getElementById('chart'));
    // Convert the Classic options to Material options.
    chart.draw(data, google.charts.Bar.convertOptions(options));
  };