谷歌图表单个条形图颜色

Google Chart individual bar colours

本文关键字：条形图 颜色 表单 谷歌      更新时间：2023-09-26

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

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循环来遍历原始数据，并使用以下内容自动添加null：

  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的兼容性问题）。

相关文章：