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

Question

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

我做了什么：

我想要的：

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

尝试这样做，但按需要做了。

        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文档中寻找答案，但是没有找到。

Answer 1

在 google 图表中，真正有 "groups" 个柱形图，每个柱形图都有不同的颜色，
您需要使用单独的列或系列...

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

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

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

您还需要插入空行以使 "groups"...

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>

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

Print 2 names in Google Charts Bar

javascript

charts

google-visualization