在Google Charts中,要在时间线按ID分组的条形图中设置颜色,您需要使用series
选项为每个ID指定颜色
首先,确保在HTML文件中包含以下脚本标签以加载Google Charts库:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
然后,在<script>
标签中,您可以使用以下代码创建一个按ID分组的条形图,并为每个ID设置颜色:
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['ID', 'Start', 'End', 'Category'],
['A', new Date(2021, 0, 1), new Date(2021, 0, 10), 'Cat1'],
['B', new Date(2021, 0, 3), new Date(2021, 0, 8), 'Cat2'],
['A', new Date(2021, 0, 12), new Date(2021, 0, 20), 'Cat1'],
['B', new Date(2021, 0, 15), new Date(2021, 0, 25), 'Cat2']
]);
var options = {
title: '按ID分组的条形图',
legend: { position: 'none' },
series: {
0: { color: '#3366CC' }, // ID为'A'的颜色
1: { color: '#DC3912' } // ID为'B'的颜色
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
在上面的示例中,我们为ID 'A' 设置了颜色 #3366CC
,为ID 'B' 设置了颜色 #DC3912
。您可以根据需要更改这些颜色值。
最后,在HTML文件的<body>
部分添加一个<div>
元素,用于显示图表:
<div id="chart_div" style="width: 900px; height: 500px;"></div>
现在,当您加载HTML页面时,应该会看到一个按ID分组的条形图,其中每个ID具有指定的颜色。
领取专属 10元无门槛券
手把手带您无忧上云