着色Google Stepped Area Charts? [英] Coloring Google Stepped Area Charts?
本文介绍了着色Google Stepped Area Charts?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
是否可以对每个步骤单独着色?现在所有的步骤都是蓝色的,但我想要第一步蓝色,第二个黄色,第三个红色,...
< div id =chart_divstyle =width:100%; height:200px;>< / div>
google.charts.load('current',{'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
$ b函数drawChart(){
var data = google.visualization.arrayToDataTable([
['Step','Equity'],
['1', -40],
['2',-40],
['3',-40],
['4',-40],
['5 ',-30],
['6',-30],
['7',10],
['8',10],
['9 ',10],
['10',50]
]);
var options = {
legend:'none',
vAxis:{ticks:[{v:-50,f:'0%'},{v:0 ,f:'50%'},{v:50,f:'100%'}]},
enableInteractivity:false,
hAxis:{textPosition:'none'},
chartArea:{top:10,left:40,bottom:10,right:5,width:100%,height:100%},
};
var chart = new google.visualization.SteppedAreaChart(document.getElementById('chart_div'));
chart.draw(data,options);
解决方案
您可以使用'style'
栏目角色
请参阅下面的工作片段...
google.charts.load('current',{callback:function(){var data = google.visualization.arrayToDataTable([['Step','Equity' ,{role:'style'}],//< - 定义样式column ['1',-40,'blue'],['2',-40,'yellow'],['3' -40,'red'],['4',-40,'green'],['5',-30,'purple'],['6',-30,'orange'],['7 ',10,'青色'],['8',10','靛蓝'],['9',10, 'magenta'],['10',50,'lime']]); var options = {legend:'none',vAxis:{ticks:[{v:-50,f:'0%'},{ v:0,f:'50%'},{v:50,f:'100%'}]},enableInteractivity:false,hAxis:{textPosition:'none'},chartArea:{top:10,left: 40,bottom:10,right:5,width:100%,height:100%},}; var chart = new google.visualization.SteppedAreaChart(document.getElementById('chart_div')); chart.draw(数据,选项); },packages:['corechart']});
is it possible to color each step indivual? Now all steps are blue but I want the first step blue, second yellow, third red, ...
<div id="chart_div" style="width: 100%; height: 200px;"></div>
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Step', 'Equity'],
['1', -40],
['2', -40],
['3', -40],
['4', -40],
['5', -30],
['6', -30],
['7', 10],
['8', 10],
['9', 10],
['10', 50]
]);
var options = {
legend: 'none',
vAxis: { ticks: [{v:-50, f:'0%'}, {v:0, f:'50%'}, {v:50, f:'100%'}] },
enableInteractivity: false,
hAxis: { textPosition: 'none' },
chartArea:{top:10,left:40,bottom:10,right:5, width:"100%",height:"100%"},
};
var chart = new google.visualization.SteppedAreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
解决方案
you can use a 'style'
column role
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Step', 'Equity', {role: 'style'}], // <-- define style column
['1', -40, 'blue'],
['2', -40, 'yellow'],
['3', -40, 'red'],
['4', -40, 'green'],
['5', -30, 'purple'],
['6', -30, 'orange'],
['7', 10, 'cyan'],
['8', 10, 'indigo'],
['9', 10, 'magenta'],
['10',50, 'lime']
]);
var options = {
legend: 'none',
vAxis: { ticks: [{v:-50, f:'0%'}, {v:0, f:'50%'}, {v:50, f:'100%'}] },
enableInteractivity: false,
hAxis: { textPosition: 'none' },
chartArea:{top:10,left:40,bottom:10,right:5, width:"100%",height:"100%"},
};
var chart = new google.visualization.SteppedAreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
这篇关于着色Google Stepped Area Charts?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文