柱状图默认不高亮，点击柱子才高亮怎么设置

[wl532882877]

.series(
    arrayOf(
        AASeriesElement().apply {
            borderRadiusTopLeft("50%")
            borderRadiusTopRight("50%")
            data(deepSleepData.toTypedArray())
        },
        AASeriesElement().apply {
            data(lightSleepData.toTypedArray())
        },
        AASeriesElement().apply {
            data(awakeData.toTypedArray())
        }
    )
)

我设置了三组数据 我希望默认所有的类型的柱子都不显示高亮，当我点击整个柱子才高亮 ，现在是相反的，默认高亮 点击变暗

[AAChartModel]

现在是相反的，默认高亮 点击变暗

现在Highcharts 的柱状图📊默认效果, 其实就是点击之后变亮, 棱柱 brightness 提亮了 0.1.

参考

• https://api.highcharts.com/highcharts/series.column.states.hover.brightness

[AAChartModel]

AI问答:

问:

// Highcharts 默认的 hover 状态配置（源码简化版）
plotOptions: {
    series: {
        states: {
            hover: {
                enabled: true,       // 默认启用悬停高亮
                brightness: 0.1,     // ⭐️⭐️⭐️颜色亮度增加10% 
                borderColor: '#666666',
                borderWidth: 1,
                animation: {
                    duration: 50    // 高亮动画过渡时间
                }
            }
        }
    }
}

这段图表配置代码中的brightness: 0.1,背后是什么机制在起作用?

答:

Highcharts 中的 brightness 参数通过 ​​颜色空间转换算法​​ 动态调整元素的颜色值. 其本质是在原有颜色基础上做HSL（Hue 色相、Saturation 饱和度、Lightness 明度）空间的亮度调整.

PS:

以上问答内容, 由我整理自在线 AI 工具.

[AAChartModel]

我希望默认所有的类型的柱子都不显示高亮，当我点击整个柱子才高亮

参考相同问题:

• 请问我可以用 AAChartKit 实现类似于下图这种点击的柱状图高亮的效果吗 AAChartKit-Swift#365

对应的 Kotlin 版本代码如下:

    //https://github.com/AAChartModel/AAChartKit-Swift/issues/365
    fun customColumnChartBorderStyleAndStatesHoverColor(): AAChartModel {
        return AAChartModel()
            .chartType(AAChartType.Column)
            .stacking(AAChartStackingType.Normal)
            .colorsTheme(arrayOf(AAColor.DarkGray, AAColor.LightGray)) //Colors theme
            .categories(arrayOf(
                "January", "February", "March", "April", "May", "June",
                "July", "August", "September", "October", "November", "December"
            ))
            .series(arrayOf(
                AASeriesElement()
                    .name("Berlin Hot")
                    .borderColor(AAColor.White)
                    .borderWidth(3)
                    .borderRadius(10)
                    .states(AAStates()
                        .hover(AAHover()
                            .color(AAColor.Red)))
                    .data(arrayOf(7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6)),
                AASeriesElement()
                    .name("Beijing Hot")
                    .borderColor(AAColor.White)
                    .borderWidth(3)
                    .borderRadius(10)
                    .states(AAStates()
                        .hover(AAHover()
                            .color("dodgerblue"))) // Dodgerblue／道奇藍／#1e90ff十六进制颜色代码
                    .data(arrayOf(0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5))
            ))
    }

Kotlin 的 demo 项目中已有此示例, 下载运行查看即可.

[wl532882877]

AI问答:

问:

// Highcharts 默认的 hover 状态配置（源码简化版）
plotOptions: {
series: {
states: {
hover: {
enabled: true, // 默认启用悬停高亮
brightness: 0.1, // ⭐️⭐️⭐️颜色亮度增加10%
borderColor: '#666666',
borderWidth: 1,
animation: {
duration: 50 // 高亮动画过渡时间
}
}
}
}
}
这段图表配置代码中的brightness: 0.1,背后是什么机制在起作用?

答:

Highcharts 中的 brightness 参数通过 ​​颜色空间转换算法​​ 动态调整元素的颜色值. 其本质是在原有颜色基础上做HSL（Hue 色相、Saturation 饱和度、Lightness 明度）空间的亮度调整.

PS:

以上问答内容, 由我整理自在线 AI 工具.

这是我修改的方法 aaOptions.apply {
chart?.events = AAChartEvents().load(
"""
function() {
this.series.forEach(series => {
series.points.forEach(point => {
point.graphic.attr({ opacity: 0.3 });
});
});
}
""".trimIndent()
)
plotOptions?.series?.point = AAPoint().events(
AAPointEvents().click(
"""
function() {
const chart = this.series.chart;
const clickedIndex = this.index;
const isSameIndex = (chart.currentHighlightIndex === clickedIndex);
const newHighlightIndex = isSameIndex ? -1 : clickedIndex;
chart.series.forEach(series => {
series.points.forEach((point, index) => {
const shouldHighlight = (index === newHighlightIndex);
point.graphic.attr({
opacity: shouldHighlight ? 1 : 0.3,
zIndex: shouldHighlight ? 2 : 1
});
});
});
chart.currentHighlightIndex = newHighlightIndex;
}
""".trimIndent()
)
)
} 实现了效果 但是不理想 反应速度很慢 请问还有没有更好的办法