不同颜色的酒吧

Question

>我有一个 2 列 3 行的表(enours | 15 ; gele|10 ; clos|14( 我正在使用谷歌图表栏 问题是我希望 TI 为条形使用不同的颜色 当我使用这个时 颜色： ["红色"，"黄色"，"蓝色"]， 所有条形都只有红色，我不想这样 我希望你理解我，你会在下面找到我的代码

<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var options = {
title: 'Graph Evolution (ticket encours/clos)',
width: 1200,
height: 800,
bar: { groupWidth: "95%" },
seriesType: 'bars',
series: { 5: { type: 'line' } },
colors: ['red','yellow', 'blue'],
};

$.ajax({
type: "POST",
url: "multicolumn.aspx/GetChartData",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var data = google.visualization.arrayToDataTable(r.d);
var chart = new google.visualization.BarChart($("#chart_div")[0]);
chart.draw(data, options);
},
failure: function (r) {
alert(r.d);
},
error: function (r) {
alert(r.d);
}
});
}
</script>  

Answer 1

colors选项将数组中的每种颜色分配给数据表中的每个系列。
其中序列是数据表中的 x 轴后面的一列。

例如，为了有 3 种颜色(使用colors选项(，
除了 x 轴或第一列之外，数据表中还需要有 3 列。

例如

x,        encours, gele, clos
category, 15,      10,   14

相反，您只有一个系列...

x,       category
encours, 15
gele,    10
clos,    14

因此，colors选项将不起作用。
我们需要改用样式列角色。

这允许我们在数据表中分配颜色...

x,       category, style
encours, 15,       red
gele,    10,       yellow
clos,    14,       blue

您可以在数据中包含颜色，对于样式列，
请使用对象表示法作为列标题...

[
['category', 'value', {type: 'string', role: 'style'}],
['encours', 15, 'red'],
['gele', 10, 'yellow'],
['clos', 14, 'blue'],
]

或者，我们可以使用数据视图，其中包含样式角色的计算列。

var view = new google.visualization.DataView(data);
view.setColumns([
0, 1, {
calc: function (dt, row) {
var category = dt.getValue(row, 0);
var color;
switch (category) {
case 'encours':
color = 'red';
break;
case 'gele':
color = 'yellow';
break;
case 'clos':
color = 'blue';
break;
}
return color;
},
type: 'string',
role: 'style'
}
]);

请参阅以下代码片段...

google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var options = {
title: 'Graph Evolution (ticket encours/clos)',
width: 1200,
height: 800,
bar: { groupWidth: "95%" },
seriesType: 'bars',
series: { 5: { type: 'line' } },
colors: ['red','yellow', 'blue'],
};

$.ajax({
type: "POST",
url: "multicolumn.aspx/GetChartData",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var data = google.visualization.arrayToDataTable(r.d);
var view = new google.visualization.DataView(data);
view.setColumns([
0, 1, {
calc: function (dt, row) {
var category = dt.getValue(row, 0);
var color;
switch (category) {
case 'encours':
color = 'red';
break;
case 'gele':
color = 'yellow';
break;
case 'clos':
color = 'blue';
break;
}
return color;
},
type: 'string',
role: 'style'
}
]);
var chart = new google.visualization.BarChart($("#chart_div")[0]);
chart.draw(view, options);
},
failure: function (r) {
alert(r.d);
},
error: function (r) {
alert(r.d);
}
});
}

---

注意：您不应该使用旧版本的谷歌图表。
您需要更新到较新的版本。

这只会更改load语句。

从页面中删除以下脚本...

<script src="https://www.google.com/jsapi"></script>

并替换为...

<script src="https://www.gstatic.com/charts/loader.js"></script>

对于加载语句，请删除这些行...

google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);

并替换为这些...

google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);