Google Chart：如何更改负值的颜色 [英] Google Chart : How to change color for negative values
本文介绍了Google Chart：如何更改负值的颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我目前使用GoogleCharts有一个很好的AreaChart，但是我试图在值为负值时更改图表的颜色和背景颜色。
从我发现，想法是只显示一个区域的正值，另一个负值，以便我可以自定义颜色。但是，您可以在下面看到我没有真正成功做到这一点。
有什么想法？
感谢，
Tim
google.charts。 load（'current'，{packages：['corechart'，'line']}）; google.charts.setOnLoadCallback（drawLineColors）;函数drawLineColors（）{var data = new google.visualization.DataTable（）; data.addColumn（'number'，'X'）; data.addColumn（'number'，'Blue Team'）; data.addColumn（'number'，'Red Team'）; data.addRows（[[0,0,0]，[3,1700,1600]，[6,1800,1700]，[9,2500,2423]，[12,3000,2500]，[15,4700， 5800,6500]，[18,5200,5000]，[21,5500,6000]，[24,6000,6200]，[27,6800,6700]，[30,7500,7000]，[33,7800,8200] ，[36,7900,9756]，[39,8000,10752]，[42,9000,13753]，[45,15000,17845]]）; var options = {legend：{position：'top'}，enableInteractivity：false，width：712，height：156，backgroundColor：{fill：'transparent'}，curveType：'function'，hAxis：{title：'Time' }，vAxis：{title：'Team Gold'}，颜色：['＃FF0000'，'＃0000FF']}; var dataView = new google.visualization.DataView（data）; dataView.setColumns（[0，{calc：function（data，row）{return data.getValue（row，2） - data.getValue（row，1）;}，type：'number'，label：'Blue'} ]）; dataView.setColumns（[1，{calc：function（data，row）{return data.getValue（row，1） - data.getValue（row，2）;}，type：'number'，label：'Red'} ]）; var chart = new google.visualization.LineChart（document.getElementById（'chart_div'））; chart.draw（dataView，options）;}
< script type =text / javascriptsrc =https://www.gstatic.com/charts/loader.js>< / script>< div id =chart_div>< / div> / code>
解决方案
colors 将颜色映射到每个系列
在这种情况下，只有一个系列（或列） - 差异
改为使用样式列角色来定义每行的颜色
同样：多次使用 setColumns ，覆盖之前调用到 setColumns
同时提供所有列
列数组可以包含...
一个整数作为数据表的列索引的引用
或一个自定义函数的对象
请参阅以下工作代码片段...
]}）;函数drawLineColors（）{var data = new google.visualization.DataTable（）; data.addColumn（'number'，'X'）; data.addColumn（'number'，'Blue Team'）; data.addColumn（'number'，'Red Team'）; data.addRows（[[0,0,0]，[3,1700,1600]，[6,1800,1700]，[9,2500,2423]，[12,3000,2500]，[15,4700， 5800,6500]，[18,5200,5000]，[21,5500,6000]，[24,6000,6200]，[27,6800,6700]，[30,7500,7000]，[33,7800,8200] ，[36,7900,9756]，[39,8000,10752]，[42,9000,13753]，[45,15000,17845]]）; var options = {legend：{position：'top'}，enableInteractivity：false，width：712，height：156，backgroundColor：{fill：'transparent'}，curveType：'function'，hAxis：{title：'Time' }，vAxis：{title：'Team Gold'}}; var dataView = new google.visualization.DataView（data）; dataView.setColumns（[//通过索引0引用第一列，//方差{calc：function（data，row）{return data.getValue（row，2） - data.getValue（row，1）;}，type： 'number'，label：'Y'}，// variance color {calc：function（data，row）{var val = data.getValue（row，2） - data.getValue（row，1）; if（val> ; = 0）{return'＃0000FF';} return'＃FF0000';}，type：'string'，role：'style'}]）; var chart = new google.visualization.LineChart（document.getElementById（'chart_div'））; chart.draw（dataView，options）;}
< script>< / div>< / script> / b>
或者如果你想为每个团队分隔线路......
google.charts.load（'current'，{callback：drawLineColors，packages：['corechart']}）;函数drawLineColors（）{var data = new google.visualization.DataTable（）; data.addColumn（'number'，'X'）; data.addColumn（'number'，'Blue Team'）; data.addColumn（'number'，'Red Team'）; data.addRows（[[0,0,0]，[3,1700,1600]，[6,1800,1700]，[9,2500,2423]，[12,3000,2500]，[15,4700， 5800,6500]，[18,5200,5000]，[21,5500,6000]，[24,6000,6200]，[27,6800,6700]，[30,7500,7000]，[33,7800,8200] ，[36,7900,9756]，[39,8000,10752]，[42,9000,13753]，[45,15000,17845]]）; var options = {legend：{position：'top'}，enableInteractivity：false，width：712，height：156，backgroundColor：{fill：'transparent'}，curveType：'function'，hAxis：{title：'Time' }，vAxis：{title：'Team Gold'}，颜色：['＃0000FF'，'＃FF0000']}; var dataView = new google.visualization.DataView（data）; dataView.setColumns（[/ /引用第一列由索引0，//队Y是更好的{计算：函数（数据，行）{var val = data.getValue（row，2） - data.getValue（row，1） ; if（val> 0）{return val;} return null;}，type：'number'，label：'Blue'}，// team X is better {calc：function（data，row）{var val = data.getValue（row，1） - data.getValue（row，2）; if（val> 0）{return val;} return null;}，type：'number'，label：'Red'}，]） ; var chart = new google.visualization.LineChart（document.getElementById（'chart_div'））; chart.draw（dataView，options）;}
< script>< / div>< / script> / pre>
I currently have a nice AreaChart using GoogleCharts, however I'm trying to change the color and background color of the chart when values are negative.
From what I found, idea would be to display one area for positive values only, and another one for negative values, so that I could custom colors. However you can see below I didn't really success to do it.
Any idea?
Thanks,
Tim
google.charts.load('current', {
packages: ['corechart', 'line']
});
google.charts.setOnLoadCallback(drawLineColors);
function drawLineColors() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Blue Team');
data.addColumn('number', 'Red Team');
data.addRows([
[0, 0, 0],
[3, 1700, 1600],
[6, 1800, 1700],
[9, 2500, 2423],
[12, 3000, 2500],
[15, 4700, 5800],
[18, 5200, 5900],
[21, 5500, 6000],
[24, 6000, 6200],
[27, 6800, 6700],
[30, 7500, 7000],
[33, 7800, 8200],
[36, 7900, 9756],
[39, 8000, 10752],
[42, 9000, 13753],
[45, 15000, 17845]
]);
var options = {
legend: {
position: 'top'
},
enableInteractivity: false,
width: 712,
height: 156,
backgroundColor: {
fill: 'transparent'
},
curveType: 'function',
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Team Gold'
},
colors: ['#FF0000', '#0000FF']
};
var dataView = new google.visualization.DataView(data);
dataView.setColumns([0, {
calc: function(data, row) {
return data.getValue(row, 2) - data.getValue(row, 1);
},
type: 'number',
label: 'Blue'
}]);
dataView.setColumns([1, {
calc: function(data, row) {
return data.getValue(row, 1) - data.getValue(row, 2);
},
type: 'number',
label: 'Red'
}]);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(dataView, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
解决方案 the config option for colors maps a color to each series
in this case, there is only one series (or column) -- variance
instead, use a style column role to define the color for each row
also: using setColumns multiple times, overwrites any previous calls to setColumns
provide all the columns at the same time
the columns array can contain...
an integer as a reference to a column index of the data table
or an object for a custom function
see following working snippet...
google.charts.load('current', {
callback: drawLineColors,
packages: ['corechart']
});
function drawLineColors() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Blue Team');
data.addColumn('number', 'Red Team');
data.addRows([
[0, 0, 0],
[3, 1700, 1600],
[6, 1800, 1700],
[9, 2500, 2423],
[12, 3000, 2500],
[15, 4700, 5800],
[18, 5200, 5900],
[21, 5500, 6000],
[24, 6000, 6200],
[27, 6800, 6700],
[30, 7500, 7000],
[33, 7800, 8200],
[36, 7900, 9756],
[39, 8000, 10752],
[42, 9000, 13753],
[45, 15000, 17845]
]);
var options = {
legend: {
position: 'top'
},
enableInteractivity: false,
width: 712,
height: 156,
backgroundColor: {
fill: 'transparent'
},
curveType: 'function',
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Team Gold'
}
};
var dataView = new google.visualization.DataView(data);
dataView.setColumns([
// reference first column by index
0,
// variance
{
calc: function(data, row) {
return data.getValue(row, 2) - data.getValue(row, 1);
},
type: 'number',
label: 'Y'
},
// variance color
{
calc: function(data, row) {
var val = data.getValue(row, 2) - data.getValue(row, 1);
if (val >= 0) {
return '#0000FF';
}
return '#FF0000';
},
type: 'string',
role: 'style'
}
]);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(dataView, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
EDIT
or if you want separate lines for each team...
google.charts.load('current', {
callback: drawLineColors,
packages: ['corechart']
});
function drawLineColors() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Blue Team');
data.addColumn('number', 'Red Team');
data.addRows([
[0, 0, 0],
[3, 1700, 1600],
[6, 1800, 1700],
[9, 2500, 2423],
[12, 3000, 2500],
[15, 4700, 5800],
[18, 5200, 5900],
[21, 5500, 6000],
[24, 6000, 6200],
[27, 6800, 6700],
[30, 7500, 7000],
[33, 7800, 8200],
[36, 7900, 9756],
[39, 8000, 10752],
[42, 9000, 13753],
[45, 15000, 17845]
]);
var options = {
legend: {
position: 'top'
},
enableInteractivity: false,
width: 712,
height: 156,
backgroundColor: {
fill: 'transparent'
},
curveType: 'function',
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Team Gold'
},
colors: ['#0000FF', '#FF0000']
};
var dataView = new google.visualization.DataView(data);
dataView.setColumns([
// reference first column by index
0,
// team Y is better
{
calc: function(data, row) {
var val = data.getValue(row, 2) - data.getValue(row, 1);
if (val > 0) {
return val;
}
return null;
},
type: 'number',
label: 'Blue'
},
// team X is better
{
calc: function(data, row) {
var val = data.getValue(row, 1) - data.getValue(row, 2);
if (val > 0) {
return val;
}
return null;
},
type: 'number',
label: 'Red'
},
]);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(dataView, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
这篇关于Google Chart：如何更改负值的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
