Google Chart单独的条形颜色

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

添加列将添加所有“空”值，那么你可以设置数据值如你所愿。如果不以这种相对尴尬的方式来做（添加所有额外的系列），就没有任何方法在API中对各种系列进行着色。

如果你不想做这种方式，最好的办法是在挖至SVG，并找出如何处理与CSS，而不是SVG（这将导致与IE浏览器兼容性问题，不过）。