Question

我想使用谷歌条形图（材料设计）和arrayToDataTable中提供的选项来自定义条形图的颜色。

示例：

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

如您所见，如果我引用documentation，则栏应为黑色事实并非如此此外，没有添加第三列（因此有些东西将其作为角色捕获，但不执行相关行为）。

我看到了关于它的多个主题，但他们正在使用旧包（不是材料设计）。

感谢帮助人员。

更新1：

将#00000颜色替换为#000000（不解决问题，我在编写此示例时忘记了0）

Answer 1

不幸的是，column roles 无效材料图表

以及several configuration options

建议使用核心图表

有一个配置选项可以将核心图表设置为材料

theme: 'material'

但不完全正确，请参阅以下工作代码段...

＆＃13;

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

＆＃13;

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

＆＃13;

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

- ＆GT; '#000000'

VS。

- ＆GT; '#00000'

Google Chart（Material） - Type Bar - 具有角色样式KO的arrayToDataTable中的数据？

1 个答案: