如何在Google Chart图表(线型)中添加X轴上的垂直线？ [英] How can I add a vertical line on the X axis in a Google Chart' chart (Line type)?

问题描述

我正在使用Reaction和Google图表，我刚发现一个问题，我找不到解决方案。

我有此组件

<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年添加一条垂直线。

我该怎么做？

感谢您的帮助。

推荐答案

若要添加垂直线，请在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']
};

请参阅以下工作片段.

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>

这篇关于如何在Google Chart图表(线型)中添加X轴上的垂直线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！