AAChartKit-Swift icon indicating copy to clipboard operation
AAChartKit-Swift copied to clipboard

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

Open wanxiangxiang opened this issue 1 year ago • 3 comments

wanxiangxiang avatar Nov 28 '24 07:11 wanxiangxiang

1732778010362

wanxiangxiang avatar Nov 28 '24 07:11 wanxiangxiang

类似如下配置 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 avatar Nov 28 '24 10:11 AAChartModel

参考相关问题:

  • https://github.com/AAChartModel/AAChartKit/issues/1383

AAChartModel avatar Nov 28 '24 10:11 AAChartModel