我正在使用 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 年添加一条垂直线。
我该怎么做？
谢谢你的帮助。
要添加垂直线，请使用 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>