google-visualization - 谷歌图表 : How to draw the vertical axis for LineChart?

Question

我想在我的网页上画一个Google的折线图!这是我的 js 代码:

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['x', 'Cats', 'Blanket 1'],
    ['A',   1,       10],
    ['B',   2,       5],
    ['C',   4,       12],
    ['D',   8,       5]
  ]);

  var options = {
      curveType: 'function',
      lineWidth: 2,
      hAxis: {
        baselineColor: 'red', 
        textStyle: {color: '#000', fontName: 'Arial', fontSize: 10}, 
        gridlines: { color: '#f3f3f3', count: 5} 
      },
      vAxis: {
        baseline: 0, 
        viewWindowMode: "explicit", 
        viewWindow:{ min: 0 },
        gridlines: { color: '#f3f3f3', count: 6} 
      }
    };
  new google.visualization.LineChart(document.getElementById('visualization')).
      draw(data, options);
}

但是，绘制的结果图表没有任何垂直轴线。如何添加垂直轴线，如下图所示: 非常感谢!

Answer 1

类别轴不支持网格线。由于相关数据使用字符串作为类别(X 轴标签)，因此无法告诉它们“应该”如何分割。不过，您可以通过以下技巧来解决这个问题。

技巧 1:将数据数字化

所以现在你有字符串，这意味着没有网格线。不过我们需要网格线，所以我们必须纠正这个小问题。因此，我们将第一列 (X) 转换为一个数字，并带有格式，因此当您将鼠标悬停在其上时(在图例中)，它会显示“A”或“B”或“C”:

  var data = new google.visualization.DataTable();
  data.addColumn('number', 'x');
  data.addColumn('number', 'Cats');
  data.addColumn('number', 'Blanket 1');
  data.addRows([
    [{v: 1, f:'A'},   1,       10],
    [{v: 2, f:'B'},   2,       5],
    [{v: 3, f:'C'},   4,       12],
    [{v: 4, f:'D'},   8,       5]
  ]);

但这并不能解决问题。现在我们在底轴上有数字，以奇怪的 0.8 间隔截断。所以我们想解决这个问题。不幸的是，使用 hAxis，您无法设置最小/最大值并让它保持不变(我不知道为什么)。我们可以通过在选项中添加 benchmark: 0 来修复最小值。

为了获得最大值，我们必须添加一个虚拟系列。

把它们放在一起，我们得到这个:

function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'x');
  data.addColumn('number', 'Cats');
  data.addColumn('number', 'Blanket 1');
  // This dummy series is to extend the chart from 0-5 for padding
  data.addColumn('number', null);
  data.addRows([
    [{v: 1, f:'A'}, 1, 10, null],
    [{v: 2, f:'B'}, 2, 5, null],
    [{v: 3, f:'C'}, 4, 12, null],
    [{v: 4, f:'D'}, 8, 5, null],
    [{v: 5, f:''}, null, null, {v: 0, f:''}]
  ]);

  options = {
    curveType: 'function',
    lineWidth: 2,
    hAxis: {
      // Show a baseline at 0
      baseline: 0,
      // 6 Gridlines, 4 labels + left and right for padding
      gridlines: {
        count: 6
      },
    },
    vAxis: {
      baseline: 0,
    },
    series: [
      {},
      {},
      // Hide our dummy series
      {
        lineWidth: 0,
        pointsize: 0,
        visibleInLegend: false
      },
    ]
  };
  chart1 = new google.visualization.LineChart(document.getElementById('visualization'));
  chart1.draw(data, options);
}

现在它看起来更像你想要的了。有两个主要问题。一是，如果您将鼠标悬停在图表的右下角，则会弹出一个空白工具提示(我希望这不是一个大问题，尽管如果您使图表与事件交互，您可能需要进行一些错误捕获)。另一个是我们图表的底部显示的是数字，而不是字母。

不幸的是，没有简单的方法将数字格式化为字母(至少在 Google 实现整个 ICU 模式集而不仅仅是日期/数字之前)。所以我们需要采取另一种解决方法。基本上，我所做的就是创建一个全新的图表来制作标签。然后我对其进行格式化，使其隐藏除标签之外的所有内容，并确保它与上面的图表水平对齐。

  function drawVisualization() {
    // Create and populate the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'x');
    data.addColumn('number', 'Cats');
    data.addColumn('number', 'Blanket 1');
    // This dummy series is to extend the chart from 0-5 for padding
    data.addColumn('number', null);
    data.addRows([
      [{v: 1, f:'A'}, 1, 10, null],
      [{v: 2, f:'B'}, 2, 5, null],
      [{v: 3, f:'C'}, 4, 12, null],
      [{v: 4, f:'D'}, 8, 5, null],
      [{v: 5, f:''}, null, null, {v: 0, f:''}]
    ]);

    options = {
      curveType: 'function',
      lineWidth: 2,
      hAxis: {
        // Show a baseline at 0
        baseline: 0,
        // 6 Gridlines, 4 labels + left and right for padding
        gridlines: {
          count: 6
        },
        // Hide our labels
        textPosition: 'none'
      },
      vAxis: {
        baseline: 0,
      },
      series: [
        {},
        {},
        // Hide our dummy series
        {
          lineWidth: 0,
          pointsize: 0,
          visibleInLegend: false
        },
      ]
    };

    // Add dummy data for the axis labels
    var data2 = new google.visualization.DataTable();
    data2.addColumn('string', 'x');
    data2.addColumn('number', 'dummy');
    data2.addRows([
      ['A', null],
      ['B', null],
      ['C', null],
      ['D', null]
    ]);

    chart1 = new google.visualization.LineChart(document.getElementById('visualization'));
    chart1.draw(data, options);

    chart2 = new google.visualization.LineChart(document.getElementById('visualization2'));
    chart2.draw(data2,
                {
                  chartArea: {
                    top:0,
                    height:"0%"
                  },
                  min: 0,
                  max: 0,
                  hAxis: {
                    baselineColor: '#FFFFFF'
                  },
                  vAxis: {
                    baselineColor: '#FFFFFF',
                    direction: -1,
                    textPosition: 'none',
                    gridlines: {
                      color: '#FFFFFF'
                    }
                  }
                });
  }

只需在第一个标签下方再制作一个标签，然后使用 CSS 对其进行正确对齐(将其 float 在同一位置，或者诸如此类)，看起来标签就属于上面的图表。

这并不光荣，但它确实有效。