javascript - 如何更改条形颜色(谷歌图表可视化)

Question

我在更改此柱形图颜色时遇到问题。现在它显示默认的蓝色而不是青色。

这是直播: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));
  };

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