Question

我已经阅读了很多关于此问题的其他问题，并尝试了所提供的每个代码示例，但都没有成功。我需要为每个条形图设置单独的颜色，这是我传递给图形的数据：

var data = google.visualization.arrayToDataTable([
    ['Month', 'Count'],
    ['January 2009', 10],
    ['February 2009', 20],
    ['March 2009', 10],
    ['April 2009', 20],
    ['May 2009', 10],
    ['June 2009', 20],
    ['July 2009', 10],
    ['August 2009', 20],
    ['September 2009', 10],
    ['October 2009', 20],
    ['November 2009', 10],
    ['December 2009', 20]
]);

我已尝试过设置此处Google Chart, different color for each bar建议数据的方法，但这似乎不适用于X轴上的字符串值。

我如何获得字符串X值，数字Y值以及单独设置颜色？

理想情况下，我还想明确为每个条形设置颜色，而不仅仅是传递颜色数组，这可能吗？

Answer 1

您可以通过为每组数据创建不同的系列来实现。所以不要像这样设置数据：

var data = google.visualization.arrayToDataTable([
    ['Month', 'Count'],
    ['January 2009', 10],
    ['February 2009', 20],
    ['March 2009', 10],
    ['April 2009', 20],
    ['May 2009', 10],
    ['June 2009', 20],
    ['July 2009', 10],
    ['August 2009', 20],
    ['September 2009', 10],
    ['October 2009', 20],
    ['November 2009', 10],
    ['December 2009', 20]
]);

为每组数据添加一个单独的列，如下所示：

var data = google.visualization.arrayToDataTable([
    ['Month', 'Jan', 'Feb', 'Mar', 'Apr'],
    ['January 2009', 10, null, null, null],
    ['February 2009', null, 20, null, null],
    ['March 2009', null, null, 10, null],
    ['April 2009', null, null, null, 20],
]);

这将使每个系列成为不同的颜色（它也会使图例中的每个系列和单个项目都有，或根据您的应用可能没有吸引力。）

您可以编写for循环来浏览原始数据并使用以下内容自动添加空值：

  for (var i = 0; i < rawData.getNumberOfRows(); i++) {
    data.addColumn('string', rawData.getFormattedValue(i, 0));
  };

  for (var j = 0; j < rawData.getNumberOfColumns() - 2; j++) {
    data.addRow();
    data.setValue(j, 0, rawData.getColumnLabel(j + 1));
    for (var i = 0; i < rawData.getNumberOfRows(); i++) {
      data.setValue(j, i + 1, rawData.getValue(i, j+1));
    };
  };

添加列将添加所有'null'值，然后您可以根据需要设置数据值。如果不以这种相对笨拙的方式（添加所有额外的系列），没有任何方法可以为API中的各个系列着色。

如果您不想这样做，最好的办法是深入研究SVG并找出如何用CSS操纵SVG（但这会导致与IE的浏览器兼容性问题）。< / p>

Google Chart个别条形图颜色

1 个答案: