Javascript 谷歌图表单条颜色

我已经阅读了许多关于这方面的其他问题，并尝试了提供的每一个代码示例，但都不起作用。我需要为每个条带单独的颜色，这是我传递给图表的数据：

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

我已经尝试过这里建议的设置数据的方法，但这似乎不适用于在X轴上设置字符串值

我将如何获得字符串X值、数字Y值，并分别设置颜色

---

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

一种方法是为每组数据创建不同的系列。因此，与其像这样设置数据，不如：

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

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

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

这将使每个系列具有不同的颜色（它还将使图例中的每个系列和单个项目具有不同的颜色，这取决于您的应用程序，可能不具有吸引力）

您可以编写一个for循环来遍历原始数据，并自动添加空值，如下所示：

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

for（var i=0；i

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

---

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

使用颜色数组会有什么问题（在某处明确定义或由生成不同颜色的函数计算）并使用它？