时间戳

首页 > 解决方案 > 在 Google 图表栏中打印 2 个名称

javascript - 在 Google 图表栏中打印 2 个名称

问题描述

我试图确保图中的每一行都有自己的名称，如第二张图片所示。

我做了什么：

图 1

我想要的是：

图 2

我试图在标题中放置一个数组而不是字符串。我试图为每个元素单独设置一个值名称，但它没有按预期工作。

试图这样做，但根据需要做了。

        vehicleOperationData: [
            ['Range','Value'],
            ['Today', 1000],
            ['Yesterday', 1170],
            ['',0]
        ],

        chartOptions: {
            legend: { position: 'none' },
            chart: {
                subtitle: 'Sales and Expenses'
            }
        }

我试图在名称中使用一个数组，它抛出了一个错误

            vehicleOperationData: [
            ['Range','Current','Previous'],
            [['Today','Yesterday'], 1000, 1170],
        ]

结果，我没有找到我想要的，并试图在 googlecharts 文档中找到答案，但我没有找到。

标签： javascriptchartsgoogle-visualization

解决方案

在谷歌图表中，要真正拥有“组”条，每个条都有不同的颜色，
您需要使用单独的列或系列...... 

var data = google.visualization.arrayToDataTable([
  ['Range', 'Series 0', 'Series 1'],
  ['Today', 1000, 1170],
]);

但是，在上面的示例中，您会注意到只有一行，
所以昨天没有。

为了重现所需的图表，
您首先需要使用样式角色，以便分别为每个条形着色。

您还需要插入空白行以创建“组”... 

var data = google.visualization.arrayToDataTable([
  ['Range', 'Value', {role: 'style', type: 'string'}],
  ['Today', 1000, '#3366cc'],
  ['Yesterday', 1170, '#dc3912'],
  ['', null, null],
  ['this week', 7000, '#3366cc'],
  ['last week', 9170, '#dc3912'],
]);

请参阅以下工作片段... 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Range', 'Value', {role: 'style', type: 'string'}],
    ['Today', 1000, '#3366cc'],
    ['Yesterday', 1170, '#dc3912'],
    ['', null, null],
    ['this week', 7000, '#3366cc'],
    ['last week', 9170, '#dc3912'],
  ]);

  var options = {
    legend: {position: 'none'},
    title: 'Vehicle Operating Rate'
  };

  var chart = new google.visualization.BarChart(document.getElementById('chart'));
  chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

推荐阅读