Open wanxiangxiang opened 2 days ago
options
:
Highcharts.chart('container', {
chart: {
events: {
load: function () {
const chart = this;
const mainSeries = chart.series[0];
mainSeries.data.forEach((point, i) => {
// 添加数据点连接线
chart.addSeries({
data: [
[point.x, 0],
[point.x, point.y]
],
type: 'line',
color: '#007bff',
lineWidth: 2,
enableMouseTracking: false // 禁用鼠标跟踪
});
// 在第二个网格线的顶部和底部添加圆点
if (i === 1) {
// 顶部红色圆点
chart.addSeries({
type: 'scatter',
data: [[point.x, point.y]],
color: 'red',
marker: {
symbol:"circle",
radius: 9
},
enableMouseTracking: false // 禁用鼠标跟踪
});
// 底部绿色圆点
chart.addSeries({
type: 'scatter',
data: [[point.x, 0]],
color: 'green',
marker: {
symbol:"circle",
radius: 9
},
enableMouseTracking: false // 禁用鼠标跟踪
});
}
});
// 清理之前的网格线
chart.redraw();
}
}
},
xAxis: {
title: {
text: '自定义 x 轴'
}
},
yAxis: {
title: {
text: '值'
}
},
series: [{
name: '样本数据',
data: [
[0, 29.9], // x = 0
[1.5, 71.5], // x = 1.5
[3, 106.4], // x = 3
[7, 129.2], // x = 7
[10, 144.0] // x = 10
]
}]
});
对以上内容作进一步进行修改, 即可得到类似你的截图中的图表.