时间戳

首页 > 解决方案 > 在条形图系列之间显示水平网格线

charts - 在条形图系列之间显示水平网格线

问题描述

我有一个条形图，用于比较不同类别的预算和支出。

问题是，预算和进度可能为零，因此很难弄清楚这些组，正如可以在这个JSFiddle中看到的那样。

有一个分隔组的网格线会很棒，比只有空白空间更明显。

我可以垂直地做，但它不能水平地工作。

    hAxis: {
      title: '$',
      minValue: 0,
      gridlines: {color: 'cyan'}
    },
    vAxis: {
      title: 'Food',
      gridlines: {color: 'red'}
    }

任何人都可以帮忙吗？

标签： chartsgoogle-visualization

解决方案

网格线仅受连续轴（数字、日期等）支持。
它们不会出现在离散轴（字符串）中

在数据表中，您可以使用对象表示法以使用连续轴，
但仍显示字符串值。( {v: 4, f: 'Pizza'})

['Food', 'Budgeted', 'Spent'],
[{v: 4, f: 'Pizza'}, 8175000, 7854695],
[{v: 3, f: 'Hamburger'}, 0, 2792000],
[{v: 2, f: 'Milkshake'}, 2695000, 0],
[{v: 1, f: 'Paella'}, 0, 0]

其中v:是值，f:是格式化值。

该值用于控制顺序，
格式化后的值将显示在工具提示中。

然后，为了在轴上显示标签，我们必须在选项
中使用对象表示法。ticks

  ticks: [
    {v: 0.5, f: ''},
    {v: 1, f: 'Paella'},
    {v: 1.5, f: ''},
    {v: 2, f: 'Milkshake'},
    {v: 2.5, f: ''},
    {v: 3, f: 'Hamburger'},
    {v: 3.5, f: ''},
    {v: 4, f: 'Pizza'},
    {v: 4.5, f: ''}
  ],

具有一半值的刻度将在它们之间添加一条线。
但是您将无法仅在两者之间添加网格线。
因为我们必须为标签本身添加一个勾号。

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Food', 'Budgeted', 'Spent'],
    [{v: 4, f: 'Pizza'}, 8175000, 7854695],
    [{v: 3, f: 'Hamburger'}, 0, 2792000],
    [{v: 2, f: 'Milkshake'}, 2695000, 0],
    [{v: 1, f: 'Paella'}, 0, 0]
  ]);

  var options = {
    title: 'Food budgeted vs food spent',
    bar: {
      groupWidth: '75%',
    },
    chartArea: {width: '50%'},
    hAxis: {
      title: '$',
      minValue: 0,
      gridlines: {color: 'red'}
    },
    vAxis: {
      title: 'Food',
      ticks: [
        {v: 0.5, f: ''},
        {v: 1, f: 'Paella'},
        {v: 1.5, f: ''},
        {v: 2, f: 'Milkshake'},
        {v: 2.5, f: ''},
        {v: 3, f: 'Hamburger'},
        {v: 3.5, f: ''},
        {v: 4, f: 'Pizza'},
        {v: 4.5, f: ''}
      ],
      gridlines: {color: 'red'}
    }
  };

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

推荐阅读