我正在使用 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>
关于reactjs - 如何在 Google Chart 图表(线型)中的 X 轴上添加垂直线?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52891016/