Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

这种图表用demo里面的哪个例子可以实现呢? #510

Open
wanxiangxiang opened this issue Nov 28, 2024 · 3 comments
Open

这种图表用demo里面的哪个例子可以实现呢? #510

wanxiangxiang opened this issue Nov 28, 2024 · 3 comments
Labels

Comments

@wanxiangxiang
Copy link

wanxiangxiang commented Nov 28, 2024

No description provided.

@wanxiangxiang
Copy link
Author

1732778010362

@AAChartModel
Copy link
Owner

类似如下配置 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
        ]
    }]
});

图表结果如下:

截屏2024-11-28 18 37 39

对以上内容作进一步进行修改, 即可得到类似你的截图中的图表.

@AAChartModel
Copy link
Owner

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants