Question

我正在使用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年添加一条垂直线。

我该怎么办？

感谢您的帮助。

Answer 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']
};

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

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图表的图表（线型）的X轴上添加垂直线？

1 个答案: