AAChartModel / AAChartKit-Swift

📈📊📱💻🖥️An elegant modern declarative data visualization chart framework for iOS, iPadOS and macOS. Extremely powerful, supports line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, areasplinerange, columnrange, bubble, box plot, error bars, funnel, waterfall and polar chart types. 极其精美而又强大的现代化声明式数据可视化图表框架,支持柱状图、条形图、折线图、曲线图、折线填充图、曲线填充图、气泡图、扇形图、环形图、散点图、雷达图、混合图等各种类型的多达几十种的信息图图表,完全满足工作所需.
https://cocoapods.org/pods/AAInfographics
MIT License
2.43k stars 258 forks source link

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

Open wanxiangxiang opened 2 days ago

wanxiangxiang commented 2 days ago

1732778010362

AAChartModel commented 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
        ]
    }]
});

图表结果如下:

截屏2024-11-28 18 37 39

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

AAChartModel commented 2 days ago

参考相关问题: