如何在 Google Chart 图表（线型）的 X 轴上添加垂直线？答案

【问题标题】：How can I add a vertical line on the X axis in a Google Chart' chart (Line type)?如何在 Google Chart 图表（线型）的 X 轴上添加垂直线？
【发布时间】：2018-10-19 10:56:59
【问题描述】：

我正在使用 react 和 Google Charts，但我刚刚发现了一个我找不到解决方案的问题。

我有这个组件

<Chart chartType='Line' data={data} options={options} />

以下是数据和选项的值：

const data = [
        ["Year", "Value"],
        ["2020", 48.92],
        ["2025", 49.45],
        ["2030", 49.24],
        ["2035", 50.93],
        ["2040", 49.62],
        ["2025", 49.62]
 ];
    var options = {
        legend: "none",
        colors: ['#a52714', '#097138']
    };

这个图表效果很好，但现在我只需要在 2025 年添加一条垂直线。

我该怎么做？

感谢您的帮助。

【问题讨论】：

标签： reactjs charts google-visualization

【解决方案1】：

要添加一条垂直线，在x轴之后使用注释作用。

将注释样式更改为'line',
您可以添加文本或空白字符串来绘制垂直线...

const data = [
  ['Year', {role: 'annotation', type: 'string'}, 'Value'],
  ['2020', null, 48.92],
  ['2025', 'text', 49.45],
  ['2030', null, 49.24],
  ['2035', null, 50.93],
  ['2040', null, 49.62]
];
var options = {
  annotations: {
    stem: {
      color: '#097138'
    },
    style: 'line'
  },
  legend: 'none',
  colors: ['#a52714']
};

请参阅以下工作 sn-p...

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  const data = [
    ['Year', {role: 'annotation', type: 'string'}, 'Value'],
    ['2020', null, 48.92],
    ['2025', 'text value', 49.45],
    ['2030', null, 49.24],
    ['2035', null, 50.93],
    ['2040', null, 49.62]
  ];
  var options = {
    annotations: {
      stem: {
        color: '#097138'
      },
      style: 'line'
    },
    legend: 'none',
    colors: ['#a52714']
  };
  var chart = new google.visualization.LineChart(document.getElementById("chart_div"));
  chart.draw(google.visualization.arrayToDataTable(data), options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

【讨论】：

非常感谢，正是我需要的。但是在您的代码中，垂直线出现在最后一个值中，并且有两年 2025。我需要一个带有值和垂直线的单个 2025。再次感谢您的帮助。
是的，它工作得很好，但它不是一个反应组件。这是一个很好的解决方案，但最后我找到了一种使用反应组件的方法。非常感谢。