javascript - Google Chart( Material )- 类型栏 - arrayToDataTable 中的数据具有角色样式 KO？

Question

我想使用谷歌条形图( Material 设计)以及 arrayToDataTable 中提供的选项来自定义条形的颜色。

示例:

return google.visualization.arrayToDataTable([
      ['1', '2', {role: 'style'}],
      ['1', 1000, '#000000'],
      ['2', 1170, '#000000'],
      ['3', 660, '#000000'],
      ['4', 1030, '#000000']
    ]);

正如你所看到的，如果我引用 documentation ，条形图应为黑色。
事实并非如此。
此外，没有添加第三列(因此某些东西将其捕获为 Angular 色，但不执行关联的行为)。

我看到了多个有关它的主题，但他们正在使用旧包(而不是 Material 设计)。

谢谢大家的帮助。

更新 1:

• 将 #00000 颜色替换为 #000000(并没有解决问题，我只是在编写此示例时忘记了 0)

Answer 1

不幸的是，column roles 不适用于 Material 图表

以及several configuration options

建议使用核心图表来代替

有一个配置选项可以将核心图表样式设置为 Material

主题:' Material '

但这并不准确，请参阅以下工作片段...

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart(transparent) {
  var data = google.visualization.arrayToDataTable([
    ['1', '2', {role: 'style'}],
    ['1', 1000, '#000000'],
    ['2', 1170, '#000000'],
    ['3', 660, '#000000'],
    ['4', 1030, '#000000']
  ]);

  var options = {
    legend: 'none',
    theme: 'material'
  };

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

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

此外，黑色的样式列值应该有六个零，而不是五个

--> '#000000'

对比

--> '#00000'