Google visualization 谷歌图表：如何绘制线条图的垂直轴？

我想在我的网页上画一个谷歌的折线图！以下是我的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);
}

但是，结果图表绘制时没有任何垂直轴线。如何添加垂直轴线，如下图所示：

---

非常感谢你

类别轴不支持网格线。由于所讨论的数据使用字符串作为类别（X轴标签），因此无法判断它们“应该”如何分割。但是，您可以使用以下技术来解决此问题

技巧1：将数据转换为数字

所以现在你有字符串，这意味着没有网格线。我们需要网格线，所以我们必须纠正这个小问题。因此，我们将第一列（X）转化为一个数字，其格式为当鼠标移到上面时会显示“a”或“B”或“C”（在图例中）：

但这并不能解决问题。现在我们在底部轴上有数字，以奇怪的0.8间隔切断。所以我们想解决这个问题。不幸的是，使用hAxis，您无法设置最小/最大值并使其保持不变（我不知道为什么）。我们可以通过在选项中添加基线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);
}

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

不幸的是，没有简单的方法将数字格式化为字母（至少在谷歌实现整个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将其正确对齐（将其浮动在相同的位置上，或诸如此类），看起来标签属于上面的图表

  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'
                    }
                  }
                });
  }

---

它虽然不光彩，但很有效。

使用

xticks有一个更优雅的解决方案：
为此，我们定义了如下数据表：

var data = new google.visualization.DataTable();
        data.addColumn('number', 'Month');
        data.addColumn('number', 'Sales');
        data.addRows([
        [{v: 0, f:'Jan'}, 1000],
        [{v: 1, f:'Feb'}, 1170],
        [{v: 2, f:'Mar'}, 660],
        [{v: 3, f:'Apr'}, 1030]
    ]);

在这里，我们为
月
轴设置数字值，但也设置字符串标签。

仅此项和
format
属性被删除后，我们就可以得到垂直线，但x轴标签的字符串不是数字，这不是我们想要的。

要解决这个问题，我们可以设置
xticks
强制在绘图中添加正确的标签

var options = {
        title: '',
        hAxis: {
            title: 'Month',
            titleTextStyle: {
                color: '#333'
            },
            baseline: 0,
            gridlines: {
                color: '#f3f3f3',
              count: 4
            },
           ticks: [{v: 0, f:'Jan'},{v: 1, f:'Feb'},{v: 2, f:'Mar'},{v: 3, f:'Apr'}], // <------- This does the trick
        },
        vAxis: {
            minValue: 0,
            gridlines: {
                color: '#f3f3f3',
                count: 5
            }
        }
    };

var选项={
标题：“”，
哈克斯：{
标题:"月份",，
titleTextStyle：{
颜色：“#333”
},
基线：0，
网格线：{
颜色：“#F3”，
计数：4
},
节拍：[{v:0，f:'Jan'}，{v:1，f:'Feb'}，{v:2，f:'Mar'}，{v:3，f:'Apr'}]，//您可以在这里测试js代码：谢谢您的解决方案，我的图表现在已经用网格绘制，但是它不能显示X轴标签！：）您需要制作第二个图表，就像我在第三块代码中所做的那样，只显示标签。或者，如果您愿意，您可以以不同的方式添加它们。您的建议是否可以修改为w使用data.join（对于同一个图形中的2条直线）也会出现这样的错误：类型不匹配。值0与列索引0中的类型字符串不匹配，我知道错误是变量类型不匹配，但不太确定如何解决此问题这里是JS FIDLE