我在我的一个项目中使用谷歌图表。我需要使用以下代码在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, 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>
请帮我解决这个问题
答案 0 :(得分:1)
使用带有两个堆叠区域系列的ComboChart 为单元格着色
底部区域将为'transparent'
在行不重合的数据中使用null
...
请参阅以下工作代码段...
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>