如何在 Google 图表的 X 轴上添加垂直线(折线类型)？

Question

我正在使用反应和谷歌图表，我刚刚发现了一个我找不到解决方案的问题。

我有这个组件

<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>