如何为 Google 图表中的特定条形设置特定颜色？ [复制]

Question

如何为 Google 图表中的特定条形设置特定颜色？

我尝试应用这种着色样式，但似乎没有任何效果！

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="barchart_material" style="width: 'auto'; height: 500px;"></div>

JavaScript

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

function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Statistics', 'Amount', { role: 'style' }],
        ['Categories', 5, '#D9534F'],
        ['Posts', 4, '#337AB7'],
        ['Comments', 8, '#5CB85C'],
        ['Users', 3, '#F0AD4E'],
      ]);

    var options = {
      chart: {
        title: 'Analysis',
        subtitle: '',
      },
    /*  colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'], // Another coloring method*/
      bars: 'horizontal' // Required for Material Bar Charts.
    };

    var chart = new google.charts.Bar(document.getElementById('barchart_material'));

    chart.draw(data, google.charts.Bar.convertOptions(options));
}

我认为此列表包含着色功能，暂时不支持...如果您认为这不是真的，请回答！ https://github.com/google/google-visualization-issues/issues/2143 至于“经典”图表，那么@عارف بن الأزرق 提供的解决方案肯定适用于这些图表。然而，我从不对它们感兴趣！

Answer 1

所以，事实证明——正如 WhiteHat 先生所澄清的——材料图表还不支持大多数有用的自定义选项......这里都列出了这些选项：

https://github.com/google/google-visualization-issues/issues/2143

因此，我有义务 - 正如 عارف بن الأزرق 先生所建议的那样 - 使用核心图表以及以下问题答案中提供的“材料”主题：

Google Chart (Material) - Type Bar - Data in arrayToDataTable with role style KO?

Answer 2

关注fiddle provided by google
我改了google.charts.load('current', {'packages':['corechart','bar']});
和
var chart = new google.visualization.BarChart(document.getElementById('barchart_material')); chart.draw(data, options); 它正在工作 这是您的代码的working fiddle