jquery - 谷歌图表,每组的背景颜色
问题描述
我需要创建一个图表,它应该按 7 条记录/条分组。我这样做如下。但我需要每个组的背景颜色。所以我尝试了 chartArea: {width: '100%', backgroundColor: 'silver'}
,backgroundColor: 'silver'
但它将颜色应用于整个图表区域和图表,而不是每个组。
此外,我确实看到渲染输出div/span
围绕每个组包裹以应用 CSS 背景,但似乎不可能像我想的那样包裹。
有没有办法为每个组应用背景颜色,它们之间有空白?这是代码:
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawColumnChart);
function drawColumnChart() {
var data = google.visualization.arrayToDataTable([
['Date', 'Value',{ role: 'style' }, 'Value',{ role: 'style' }, 'Value', { role: 'style' }, 'Value', { role: 'style' }, 'Value', { role: 'style' }, 'Value', { role: 'style' }, 'Value', { role: 'style' }],
['1-7', 5, 'yellow', 6, 'red', 3, 'yellow', 8, 'green', 3, 'pink', 2, 'blue', 1, 'yellow'],
['8-14', 5, 'yellow', 6, 'red', 3, 'yellow', 8, 'green', 3, 'pink', 2, 'blue', 1, 'yellow'],
['15-21', 5, 'yellow', 6, 'red', 3, 'yellow', 8, 'green', 3, 'pink', 2, 'blue', 1, 'yellow'],
]);
var options = {
legend: { position: "none" },
vAxis: {
gridlines: {
color: 'transparent'
}
},
};
var container = document.getElementById('column-chart');
var containerBounds = container.getBoundingClientRect();
var chart = new google.visualization.ColumnChart(container);
google.visualization.events.addListener(chart, 'ready', function () {
var chartLayout = chart.getChartLayoutInterface();
});
chart.draw(data, options);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_container">
<div id="column-chart" class="chart-div"></div>
</div>
解决方案
我们可以使用组合图,并使用区域系列作为背景。
但是我们将无法使用 x 轴上的字符串到达那里,
我们将不得不使用数字。
但是,我们可以使用对象表示法
来设置值 ( v:
) 并显示格式化值 ( f:
)
{v: 1, f: '1-7'}
我们也可以在我们的 x 轴刻度中使用上面的...
ticks: [{v: 1, f: '1-7'}, {v: 3, f: '8-14'}, {v: 5, f: '15-21'}],
所以我们将条形组设置为 1、3 和 5。
然后在 0-2、2-4 和 4-6 处使用区域系列作为背景。
首先,使用 x 轴的对象表示法创建数据表。
var data = google.visualization.arrayToDataTable([
['Date', 'Value', {role: 'style'}, 'Value', {role: 'style'}, 'Value', {role: 'style'}, 'Value', {role: 'style'}, 'Value', {role: 'style'}, 'Value', {role: 'style'}, 'Value', {role: 'style'}],
[{v: 1, f: '1-7'}, 5, 'yellow', 6, 'red', 3, 'yellow', 8, 'green', 3, 'pink', 2, 'blue', 1, 'yellow'],
[{v: 3, f: '8-14'}, 5, 'yellow', 6, 'red', 3, 'yellow', 8, 'green', 3, 'pink', 2, 'blue', 1, 'yellow'],
[{v: 5, f: '15-21'}, 5, 'yellow', 6, 'red', 3, 'yellow', 8, 'green', 3, 'pink', 2, 'blue', 1, 'yellow'],
]);
然后我们添加我们的区域系列列和单独行上的值。
区域系列的值应该是 y 轴上的最大可见值。
var colArea = data.addColumn('number', 'Area');
var colAreaStyle = data.addColumn({role: 'style', type: 'string'});
var row = data.addRow();
data.setValue(row, 0, 0);
data.setValue(row, colArea, 10);
data.setValue(row, colAreaStyle, 'cyan');
row = data.addRow();
data.setValue(row, 0, 2);
data.setValue(row, colArea, 10);
data.setValue(row, colAreaStyle, 'cyan');
row = data.addRow();
data.setValue(row, 0, 2);
data.setValue(row, colArea, 10);
data.setValue(row, colAreaStyle, 'magenta');
row = data.addRow();
data.setValue(row, 0, 4);
data.setValue(row, colArea, 10);
data.setValue(row, colAreaStyle, 'magenta');
row = data.addRow();
data.setValue(row, 0, 4);
data.setValue(row, colArea, 10);
data.setValue(row, colAreaStyle, 'lime');
row = data.addRow();
data.setValue(row, 0, 6);
data.setValue(row, colArea, 10);
data.setValue(row, colAreaStyle, 'lime');
在我们的选项中,我们隐藏 x 轴网格线,
设置刻度标签,并设置可见范围。
hAxis: {
gridlines: {
color: 'transparent'
},
ticks: [{v: 1, f: '1-7'}, {v: 3, f: '8-14'}, {v: 5, f: '15-21'}],
viewWindow: {
min: 0,
max: 6
}
},
并添加系列类型的选项...
series: {
7: {
areaOpacity: 1,
type: 'area'
}
},
seriesType: 'bars',
请参阅以下工作片段...
google.charts.load("current", {
packages: ['corechart']
});
google.charts.setOnLoadCallback(drawColumnChart);
function drawColumnChart() {
var data = google.visualization.arrayToDataTable([
['Date', 'Value', {role: 'style'}, 'Value', {role: 'style'}, 'Value', {role: 'style'}, 'Value', {role: 'style'}, 'Value', {role: 'style'}, 'Value', {role: 'style'}, 'Value', {role: 'style'}],
[{v: 1, f: '1-7'}, 5, 'yellow', 6, 'red', 3, 'yellow', 8, 'green', 3, 'pink', 2, 'blue', 1, 'yellow'],
[{v: 3, f: '8-14'}, 5, 'yellow', 6, 'red', 3, 'yellow', 8, 'green', 3, 'pink', 2, 'blue', 1, 'yellow'],
[{v: 5, f: '15-21'}, 5, 'yellow', 6, 'red', 3, 'yellow', 8, 'green', 3, 'pink', 2, 'blue', 1, 'yellow'],
]);
var colArea = data.addColumn('number', 'Area');
var colAreaStyle = data.addColumn({role: 'style', type: 'string'});
var row = data.addRow();
data.setValue(row, 0, 0);
data.setValue(row, colArea, 10);
data.setValue(row, colAreaStyle, 'cyan');
row = data.addRow();
data.setValue(row, 0, 2);
data.setValue(row, colArea, 10);
data.setValue(row, colAreaStyle, 'cyan');
row = data.addRow();
data.setValue(row, 0, 2);
data.setValue(row, colArea, 10);
data.setValue(row, colAreaStyle, 'magenta');
row = data.addRow();
data.setValue(row, 0, 4);
data.setValue(row, colArea, 10);
data.setValue(row, colAreaStyle, 'magenta');
row = data.addRow();
data.setValue(row, 0, 4);
data.setValue(row, colArea, 10);
data.setValue(row, colAreaStyle, 'lime');
row = data.addRow();
data.setValue(row, 0, 6);
data.setValue(row, colArea, 10);
data.setValue(row, colAreaStyle, 'lime');
var options = {
hAxis: {
gridlines: {
color: 'transparent'
},
ticks: [{v: 1, f: '1-7'}, {v: 3, f: '8-14'}, {v: 5, f: '15-21'}],
viewWindow: {
min: 0,
max: 6
}
},
legend: {
position: "none"
},
series: {
7: {
areaOpacity: 1,
type: 'area'
}
},
seriesType: 'bars',
vAxis: {
gridlines: {
color: 'transparent'
}
},
};
var container = document.getElementById('column-chart');
var chart = new google.visualization.ComboChart(container);
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_container">
<div id="column-chart" class="chart-div"></div>
</div>
推荐阅读
- python-3.x - 无法使用 python 2,7 虚拟环境进行 pip 安装
- python - 为什么长文本文件在 Spyder 中不起作用?
- xml - 跳过选择标签中一个标签的 XML 验证
- python-3.x - 无法导入 tensorflow:Anaconda 下 Spyder 中没有名为“tensorflow”的模块
- c# - Microsoft.Azure.EventGrid.Models.EventGridEvent 不能通过控制器操作反序列化
- yocto - 如何使用 git info 动态创建文件并将其包含在图像中并将其保存在构建系统中
- django - 给 ForeignKey 表单字段一个查询集的值
- kubernetes-ingress - 如何在 Rancher 中为 Kubernetes 集群设置入口?
- java - 如何使用 JAVA 流从对象列表中查找平均值
- php - preg_replace() 推文 url 到 id 标签的正则表达式不起作用