3

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

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 建议的设置数据的方法，每个条的颜色不同，但这似乎不适用于 X 轴上的字符串值。

我将如何获得字符串 X 值、数字 Y 值并单独设置颜色？

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

4

1 回答 1

2

一种方法是为每组数据创建不同的系列。所以不要像这样设置你的数据：

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

添加一列将添加所有“空”值，然后您可以根据需要设置数据值。如果不以这种相对尴尬的方式（添加所有额外的系列）进行操作，就无法为 API 中的各种系列着色。

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

于 2013-02-05T00:29:34.197 回答