首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

google图表时间线按ID分组的条形图颜色

在Google Charts中,要在时间线按ID分组的条形图中设置颜色,您需要使用series选项为每个ID指定颜色

首先,确保在HTML文件中包含以下脚本标签以加载Google Charts库:

代码语言:javascript
复制
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

然后,在<script>标签中,您可以使用以下代码创建一个按ID分组的条形图,并为每个ID设置颜色:

代码语言:javascript
复制
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>元素,用于显示图表:

代码语言:javascript
复制
<div id="chart_div" style="width: 900px; height: 500px;"></div>

现在,当您加载HTML页面时,应该会看到一个按ID分组的条形图,其中每个ID具有指定的颜色。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 领券