我创建了下面的简单散点图,只有一个点,(我总是只有一个点)
在上图中,我想将左上角和右下角的框标记为一种颜色,将其余两个框标记为不同的颜色,以向用户建议它们的值(value)是好是坏。
左上角和右下角是好的(绿色),右上角和左下角是坏的(红色)。
仅供引用,我正在添加什么颜色去哪里的示例图像
我进行了很多搜索,但找不到任何解决方案。我尝试过线性渐变,但不可能按照我想要的方式使用线性渐变。
是否可以在谷歌图表中为网格框着色?还有其他方法可以做到这一点吗?
谢谢。
最佳答案
没有配置选项来指定背景颜色。
但您可以使用堆叠区域系列来添加颜色。
对于相关图表,您将需要 5 个系列。
1) 分散
2) 区域 - 左低
3) 区域 - 左高
4) 区域 - 右低
5)区域-右高
请参阅以下工作片段...
google.charts.load('current', {
packages:['corechart']
}).then(function () {
var dataTable = new google.visualization.DataTable({
cols: [
{label: 'X', type: 'number'},
{label: 'Left-Low', type: 'number'},
{label: 'Left-High', type: 'number'},
{label: 'Right-Low', type: 'number'},
{label: 'Right-High', type: 'number'},
{label: 'Y', type: 'number'}
],
rows: [
// scatter
{c:[{v: 14}, {v: 130}, null, null, null, null]},
// colors
{c:[{v: 1}, null, {v: 170}, {v: 130}, null, null]},
{c:[{v: 6}, null, {v: 170}, {v: 130}, null, null]},
{c:[{v: 6}, null, {v: null}, {v: null}, {v: 170}, {v: 130}]},
{c:[{v: 15}, null, {v: null}, {v: null}, {v: 170}, {v: 130}]},
]
});
var options = {
colors: ['#ffffff'],
legend: 'none',
hAxis: {
ticks: [1, 6, 15],
title: 'Coleman-Liau Index'
},
height: 400,
isStacked: true,
series: {
// Left-Low
1: {
areaOpacity: 1,
color: '#e53935',
enableInteractivity: false,
type: 'area',
visibleInLegend: false
},
// Left-High
2: {
areaOpacity: 1,
color: '#43a047',
enableInteractivity: false,
type: 'area',
visibleInLegend: false
},
// Right-Low
3: {
areaOpacity: 1,
color: '#43a047',
enableInteractivity: false,
type: 'area',
visibleInLegend: false
},
// Right-High
4: {
areaOpacity: 1,
color: '#e53935',
enableInteractivity: false,
type: 'area',
visibleInLegend: false
}
},
seriesType: 'scatter',
vAxis: {
ticks: [40, 170, 300],
title: 'Talking Speed (WpM)'
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(dataTable, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
关于javascript - 具有多种颜色的 Google 图表网格背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52719735/