AAChartKit 中动态控制折线图选中点的高亮显示

在数据可视化应用中，折线图是最常用的图表类型之一。AAChartKit 作为一款功能强大的 iOS 图表库，提供了丰富的交互功能。本文将详细介绍如何在 AAChartKit 中通过代码动态控制折线图选中点的高亮显示，而不依赖用户点击操作。

核心实现原理

AAChartKit 基于 Highcharts 引擎，其选中点的高亮显示实际上是通过触发图表元素的 mouseOver 事件来实现的。我们可以通过 JavaScript 直接调用相关方法，控制特定数据点的高亮状态。

基础实现方法

默认选中点设置

在图表加载完成后，可以通过 chart.events.load 回调函数设置默认选中的点：

AAOptions *aaOptions = aaChartModel.aa_toAAOptions;

aaOptions.chart.eventsSet(AAChartEvents.new
    .loadSet([NSString stringWithFormat:@AAJSFunc(function() {
        const points = [];
        const chart = this;
        const series = chart.series;
        const length = series.length;
                   
        for (let i = 0; i < length; i++) {
            const pointElement = series[i].data[%ld];
            pointElement.onMouseOver();
            points.push(pointElement);
        }
        chart.xAxis[0].drawCrosshair(null, points[0]);
        chart.tooltip.refresh(points);
    }), defaultSelectedIndex]));

这段代码会在图表加载完成后，自动高亮显示指定索引位置的数据点，并显示对应的十字准线和工具提示。

动态更新选中点

在实际应用中，我们可能需要根据业务逻辑动态切换高亮点。相比重新渲染整个图表，更高效的做法是直接调用 JavaScript 方法局部更新：

NSString *jsFunc = ([NSString stringWithFormat:@AAJSFunc(
    function syncRefreshTooltip() {
        const points = [];
        const chart = aaGlobalChart;
        const series = chart.series;
        const length = series.length;
                   
        for (let i = 0; i < length; i++) {
            const pointElement = series[i].data[%ld];
            pointElement.onMouseOver();
            points.push(pointElement);
        }
        chart.xAxis[0].drawCrosshair(null, points[0]);
        chart.tooltip.refresh(points);
    }
    syncRefreshTooltip();
), targetIndex]);

[chartView aa_evaluateJavaScriptStringFunction:jsFunc];

这种方法只更新需要变化的部分，避免了整个图表的重新渲染，性能更优。

自动轮播高亮点

在某些场景下，我们可能需要实现自动轮播高亮不同数据点的效果。这可以通过定时器实现：

AAOptions *aaOptions = AAOptions.new
    .chartSet(AAChart.new
        .eventsSet(AAChartEvents.new
            .loadSet(@AAJSFunc(function() {
                const chart = this;
                let currentIndex = 0;
                let intervalId;
                
                function moveTooltip() {
                    const pointsToShow = [];
                    for (let i = 0; i < chart.series.length; i++) {
                        const point = chart.series[i].points[currentIndex];
                        if (point) {
                            pointsToShow.push(point);
                        }
                    }
                    
                    if (pointsToShow.length > 0) {
                        chart.tooltip.refresh(pointsToShow);
                        chart.xAxis[0].drawCrosshair(null, pointsToShow[0]);
                        currentIndex = (currentIndex + 1) % chart.series[0].points.length;
                    }
                }
                
                intervalId = setInterval(moveTooltip, 2000); // 每2秒切换一次
                
                // 初始显示第一个点
                moveTooltip();
                
                // 图表销毁时清除定时器
                this.callbacks.push(function() {
                    if (intervalId) {
                        clearInterval(intervalId);
                    }
                });
            }))));

这段代码实现了每2秒自动切换到下一个数据点的效果，同时考虑了图表销毁时的资源清理。

交互优化

在实际应用中，我们还需要考虑用户交互。当用户手动操作图表时，应该暂停自动轮播；用户操作结束后，再恢复自动轮播：

let isTouched = false;

// 触摸开始事件
chart.container.ontouchstart = function(e) {
    isTouched = true;
    if (intervalId) {
        clearInterval(intervalId);
        intervalId = null;
    }
    handleTouch(e);
};

// 触摸移动事件
chart.container.ontouchmove = function(e) {
    if (isTouched) {
        handleTouch(e);
    }
};

// 触摸结束事件
chart.container.ontouchend = function() {
    isTouched = false;
    if (!intervalId) {
        // 立即移动到下一个点，然后开始 interval
        moveTooltip();
        startInterval();
    }
};

样式定制

高亮点的样式可以通过以下配置进行定制：

// 十字准线样式
aaOptions.xAxis.crosshairSet(AACrosshair.new
    .colorSet(AAColor.darkGrayColor)
    .dashStyleSet(AAChartLineDashStyleTypeLongDashDotDot)
    .widthSet(@2));

// 工具提示样式
aaOptions.tooltip
    .styleSet(AAStyleColor(AAColor.whiteColor))
    .backgroundColorSet(@"#050505")
    .borderColorSet(@"#050505");

总结

AAChartKit 提供了灵活的方式来实现折线图选中点的动态控制。通过 JavaScript 直接操作图表元素，我们可以实现：

1. 设置默认高亮点
2. 动态切换高亮点
3. 自动轮播高亮点
4. 与用户交互的良好配合

这些技术可以广泛应用于实时数据监控、数据演示等场景，为用户提供更直观的数据可视化体验。关键是要理解 Highcharts 的底层机制，通过适当的事件处理和 JavaScript 调用实现所需功能，同时注意性能优化和用户体验。