着色细胞谷歌图表 - 散点图 [英] Coloring Cells Google Chart - Scatter Chart
本文介绍了着色细胞谷歌图表 - 散点图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在我的一个项目中使用了google图表。我需要使用以下代码在Google散点图中为一组单元格着色。
我使用 google.visualization.arrayToDataTable 来处理数据。
以下是我的代码
< script src =https://www.gstatic.com/charts /loader.js\"></script>
< div id =chart_div>< / div>
< script type =text / javascript>
google.charts.load（'current'，{
callback：function（）{
var dataTable = new google.visualization.DataTable（{
cols：[
{label：'X'，type：'number'}，
{label：'Low'，type：'number'}，
{label：'High'，type：'number'} ，
{label：'Y'，type：'number'}
]，
rows：[
{c：[{v：3}，{v：3.5} ，空白，null]}，
{c：[{v：4}，{v：5.5}，null，null]}，
{c：[{v：4}，{v： 5}，null，null]}，
{c：[{v：6.5}，{v：7}，null，null]}，
{c：[{v：8}，{ v：12}，null，null]}，
//开始单元格颜色
{c：[{v：10}，null，{v：10}，{v：10}]}，
{c：[{v：11}，null，{v：10}，{v：10}]}，
{c：[{v：20}，null，{v：10 }，{v：10}]}，
]
}）;
var options = {
legend：'none'，
hAxis： {
ticks：[0，5，10，15，20]，
title：'年龄
}，
height：400，
isStacked：true，
series：{
// low
1：{
color：'透明'，
类型：'area'，
visibleInLegend：false
}，
//高
2：{
areaOpacity： 0.6，
颜色：'＃A5D6A7'，
类型：'area'，
visibleInLegend：false
}
}，
seriesType：'scatter' ，
标题：'年龄与体重比较'，
vAxis：{
蜱：[0,5,10,15,20]，
title：'Weight'
}
};
var chart = new google.visualization.ComboChart（document.getElementById（'chart_div'））;
chart.draw（dataTable，options）;
}，
packages：['corechart']
}）;
< / script>
请帮我解决这个问题
解决方案
使用 ComboChart 将区域系列堆叠到颜色的单元格
底部区域 c $ c>'transparent'
使用 null 不要重合...
请参阅以下工作片段...
（'current'，{callback：function（）{var dataTable = new google.visualization.DataTable（）;}}
google.charts.load （{cols：[{label：'X'，type：'number'}，{label：'Low'，type：'number'}，{label：'High' ，键入：'number'}，{label：'Y'，type：'number'}]，rows：[{c：[{v：3}，{v：3.5}，null，null]}，{c ：[{v：4}，{v：5.5}，null，null]}，{c：[{v：4}，{v：5}，null，null]}，{c：[{v：6.5 }，{v：7}，null，null]}，{c：[{v：8}，{v：12}，null，null]}，// begin cell color {c：[{v：10} ，空，{v：10}，{v：10}]}，{c：[{v：11}，{v：14}，{v：10}，{v：10}]}，{c： [{v：20}，null，{v：10}，{v：10}]}，]}）; var options = {legend：'none'，hAxis：{ticks：[0,5,10,15,20]，title：'Age'}，height：400，isStacked：true，series：{// low 1： {color：'transparent'，type：'area'，visibleInLegend：false}，// high 2：{areaOpacity：0.6，color：'＃A5D6A7'，type：'area'，visibleInLegend：false}}，seriesType：'分数'，标题：'年龄与体重比较'，vAxis：{刻度：[0,5,10,15,20]，标题：'Weight'}}; var chart = new google.visualization.ComboChart（document.getElementById（'chart_div'））; chart.draw（dataTable，options）; }，packages：['corechart']}）;
I am using google charts in one of my project. I need to color a set of cells in the google scatter chart using the following code.
I am using google.visualization.arrayToDataTable for processing data.
Following is my code
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<script type="text/javascript">
google.charts.load('current', {
callback: function () {
var dataTable = new google.visualization.DataTable({
cols: [
{label: 'X', type: 'number'},
{label: 'Low', type: 'number'},
{label: 'High', type: 'number'},
{label: 'Y', type: 'number'}
],
rows: [
{c:[{v: 3}, {v: 3.5}, null, null]},
{c:[{v: 4}, {v: 5.5}, null, null]},
{c:[{v: 4}, {v: 5}, null, null]},
{c:[{v: 6.5}, {v: 7}, null, null]},
{c:[{v: 8}, {v: 12}, null, null]},
// begin cell color
{c:[{v: 10}, null, {v: 10}, {v: 10}]},
{c:[{v: 11}, null, {v: 10}, {v: 10}]},
{c:[{v: 20}, null, {v: 10}, {v: 10}]},
]
});
var options = {
legend: 'none',
hAxis: {
ticks: [0, 5, 10, 15, 20],
title: 'Age'
},
height: 400,
isStacked: true,
series: {
// low
1: {
color: 'transparent',
type: 'area',
visibleInLegend: false
},
// high
2: {
areaOpacity: 0.6,
color: '#A5D6A7',
type: 'area',
visibleInLegend: false
}
},
seriesType: 'scatter',
title: 'Age vs. Weight comparison',
vAxis: {
ticks: [0, 5, 10, 15, 20],
title: 'Weight'
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(dataTable, options);
},
packages:['corechart']
});
</script>
Please help me fixing this
解决方案
use a ComboChart with two stacked area series to color the cells
the bottom area will be 'transparent'
use null in the data where the rows do not coincide...
see following working snippet...
google.charts.load('current', {
callback: function () {
var dataTable = new google.visualization.DataTable({
cols: [
{label: 'X', type: 'number'},
{label: 'Low', type: 'number'},
{label: 'High', type: 'number'},
{label: 'Y', type: 'number'}
],
rows: [
{c:[{v: 3}, {v: 3.5}, null, null]},
{c:[{v: 4}, {v: 5.5}, null, null]},
{c:[{v: 4}, {v: 5}, null, null]},
{c:[{v: 6.5}, {v: 7}, null, null]},
{c:[{v: 8}, {v: 12}, null, null]},
// begin cell color
{c:[{v: 10}, null, {v: 10}, {v: 10}]},
{c:[{v: 11}, {v: 14}, {v: 10}, {v: 10}]},
{c:[{v: 20}, null, {v: 10}, {v: 10}]},
]
});
var options = {
legend: 'none',
hAxis: {
ticks: [0, 5, 10, 15, 20],
title: 'Age'
},
height: 400,
isStacked: true,
series: {
// low
1: {
color: 'transparent',
type: 'area',
visibleInLegend: false
},
// high
2: {
areaOpacity: 0.6,
color: '#A5D6A7',
type: 'area',
visibleInLegend: false
}
},
seriesType: 'scatter',
title: 'Age vs. Weight comparison',
vAxis: {
ticks: [0, 5, 10, 15, 20],
title: 'Weight'
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(dataTable, options);
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
这篇关于着色细胞谷歌图表 - 散点图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
