如何在Google图表中添加颜色到spefic列 [英] How to add colors to spefic columns in Google Charts
问题描述
我有一张有不同颜色4行的图表。使用复选框，我可以隐藏/显示特定的行。
现在显示所有行时（所有框都勾选）第1行是红色，第2行是黄色。当第1行隐藏时，第2行是红色，第3行是黄色。
这可能会让用户感到困惑，所以我希望将这些行分配给特定的列。有没有办法？
我现在将颜色分配到如下行：
color：[red，yellow，green，blue]
清除。
显示所有行时：
当第一行被隐藏时：
< img src =https://i.gyazo.com/cc65a8cc85841d0c176b0afb15b150fe.pngalt =image2>
我希望我的问题很明确。
编辑：我也尝试在 options.series 中指定颜色，如下所示，但同样的结果
系列：{
0：{color：'＃e2431e'，targetAxisIndex：0}，
1：{color：'＃e7711b'，targetAxisIndex：1}，
2：{color：'＃f1ca3a'，targetAxisIndex：0}，
3：{color：'＃6f9654 '，targetAxisIndex： 0}，
然后根据可见列构建颜色数组
请参阅以下工作代码片段： ..
google.charts.load（'current'，{callback： drawChart，包：['corechart']}）;函数drawChart（）{var data = new google.visualization.DataTable（）; data.addColumn（'string'，'Year'）; data.addColumn（'number'，'Q1'）; data.addColumn（'number'，'Q2'）; data.addColumn（'number'，'Q3'）; data.addColumn（'number'，'Q4'）; data.addRow（['January 2016'，500，100，1200，1000]）; data.addRow（['February 2016'，500，100，1975，1000]）; data.addRow（['March 2016'，500，100，1200，1000]）; data.addRow（['April 2016'，500，100，1200，1000]）; var colors = ['red'，'yellow'，'green'，'blue']; colors.forEach（function（color，index）{data.setColumnProperty（index + 1，'color'，color）;}）; var options = {chartArea：{top：12，right：0，bottom：72，left：72}，legend：{position：'bottom'}，colors：colors，hAxis：{slantedText：true}，vAxis：{title ：'Amount'，viewWindow：{max：2000}}，bar：{groupWidth：'90％'}，height：400}; $（'。series-chk'）。on（'change'，drawChart）; $（窗口）.resize（drawChart）; drawChart（）;函数drawChart（）{var chartColors = []; var chartColumns = [0]; var view = new google.visualization.DataView（data）; $ .each（$（'。series-chk'），function（index，checkbox）{var seriesColumn = parseInt（checkbox.value）; if（checkbox.checked）{chartColumns.push（seriesColumn）; chartColors.push（data .getColumnProperty（seriesColumn，'color'））;}}）; view.setColumns（chartColumns）; options.colors = chartColors; var chart = new google.visualization.LineChart（document.getElementById（'chart_div'））; chart.draw（view，options）; }}
< script src =https：// www.gstatic.com/charts/loader.js\"></script><script src =https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js >< / script>< input class =series-chkid =chk-0type =checkboxvalue =1checked />< label for =chk-0> ;系列0< / label>< input class =series-chkid =chk-1type =checkboxvalue =2checked />< label for =chk-1>系列1< / label>< input class =series-chkid =chk-2type =checkboxvalue =3checked />< label for =chk-2> Series 2< / label>< input class =series-chkid =chk-3type =checkboxvalue =4checked />< label for =chk-3> Series 3< ; / label>< div id =chart_div>< / div>
I have a chart with 4 lines in different colors. Using checkboxes I can hide/show specific lines. Now when all the lines are showed (all boxes checked) line 1 is red and line 2 is yellow. When line 1 is hidden line 2 is red and line 3 is yellow.
This might be confusing for users, so i want the lines to be assigned to specific columns. Is there a way?
I currently assign colors to the lines like so:
colors: [red, yellow, green, blue]
This image might make things more clear.
When all lines are shown:
When line 1 is hidden:
I hope my question is clear.
EDIT: I also tried to assign the colors in the options.series as shown below, but with the same result
series: {
0: { color: '#e2431e' ,targetAxisIndex: 0},
1: { color: '#e7711b' ,targetAxisIndex: 1},
2: { color: '#f1ca3a' ,targetAxisIndex: 0},
3: { color: '#6f9654' ,targetAxisIndex: 0},
you could assign the color as a column property on the data table
then build the colors array based on the visible columns
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Q1');
data.addColumn('number', 'Q2');
data.addColumn('number', 'Q3');
data.addColumn('number', 'Q4');
data.addRow(['January 2016', 500, 100, 1200, 1000]);
data.addRow(['February 2016', 500, 100, 1975, 1000]);
data.addRow(['March 2016', 500, 100, 1200, 1000]);
data.addRow(['April 2016', 500, 100, 1200, 1000]);
var colors = ['red', 'yellow', 'green', 'blue'];
colors.forEach(function (color, index) {
data.setColumnProperty(index + 1, 'color', color);
});
var options = {
chartArea: {
top: 12,
right: 0,
bottom: 72,
left: 72
},
legend: {
position: 'bottom'
},
colors: colors,
hAxis: {
slantedText: true
},
vAxis: {
title: 'Amount',
viewWindow: {
max: 2000
}
},
bar: {
groupWidth: '90%'
},
height: 400
};
$('.series-chk').on('change', drawChart);
$(window).resize(drawChart);
drawChart();
function drawChart() {
var chartColors = [];
var chartColumns = [0];
var view = new google.visualization.DataView(data);
$.each($('.series-chk'), function (index, checkbox) {
var seriesColumn = parseInt(checkbox.value);
if (checkbox.checked) {
chartColumns.push(seriesColumn);
chartColors.push(data.getColumnProperty(seriesColumn, 'color'));
}
});
view.setColumns(chartColumns);
options.colors = chartColors;
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(view, options);
}
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<input class="series-chk" id="chk-0" type="checkbox" value="1" checked /><label for="chk-0">Series 0</label>
<input class="series-chk" id="chk-1" type="checkbox" value="2" checked /><label for="chk-1">Series 1</label>
<input class="series-chk" id="chk-2" type="checkbox" value="3" checked /><label for="chk-2">Series 2</label>
<input class="series-chk" id="chk-3" type="checkbox" value="4" checked /><label for="chk-3">Series 3</label>
<div id="chart_div"></div>
这篇关于如何在Google图表中添加颜色到spefic列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
