AAChartKit-Swift
AAChartKit-Swift copied to clipboard
AAChartModel
点击图例旁边的空白处，可以取消选中的焦点，想问一下这个点击事件如何捕捉
Highcharts 貌似没有提供这个点击事件的回调功能, 我暂时没找到相关 API, 你可以到 Highcharts 的 GitHub 官方页面提问看看.
问:
Highcharts 怎么获取 legend 点击事件回调?
以下是 chatGPT 回答:
在 Highcharts 中，可以通过 legendItemClick 事件来获取 legend 点击事件的回调。当用户点击图例中的一个图例项时，该事件将被触发。
以下是一个示例代码，展示如何使用 legendItemClick 事件回调函数：
Highcharts.chart('container', {
// 图表配置项...
legend: {
// 图例配置项...
itemEvents: {
legendItemClick: function(event) {
// 在这里编写图例点击事件的回调逻辑
console.log('Legend item clicked:', event.target.name);
}
}
},
// 数据系列配置项...
});
在上面的示例中，我们在 legend 配置项中的 itemEvents 对象中定义了 legendItemClick 事件的回调函数。当用户点击图例项时，回调函数将被触发，并且可以访问 event 对象来获取有关点击事件的信息。
在回调函数中，你可以编写任何你想要执行的逻辑。上面的示例中，我们简单地将点击的图例项的名称打印到控制台上。
请注意，上述示例是使用 JavaScript 编写的，如果你需要在其他编程语言中使用 Highcharts，你需要相应地调整代码。
回到 AAChartKit-Swift, 在 demo 中, 有自定义 legend 的点击事件的回调的示例, 示例代码如下:
//图表自带的图例点击事件是：
//点击某个显示/隐藏的图例，该图例对应的serie就隐藏/显示。
//个人觉得不合理，正常来说，有多条折线(或其他类型的图表)，点击某个图例是想只看该图例对应的数据；
//于是修改了图例点击事件。
//
//实现的效果是(以折线图为例)：
//1. 当某条折线隐藏时，点击该折线的图例 --> 该折线显示；
//2. 当全部折线都显示时，点击某个图例 --> 该图例对应的折线显示，其他折线均隐藏；
//3. 当只有一条折线显示时，点击该折线的图例 --> 全部折线均显示；
//4. 其他情况，按默认处理：
//显示 --> 隐藏；
//隐藏 --> 显示；
//Customized legendItemClick Event online: http://code.hcharts.cn/rencht/hhhhLv/share
private func customLegendItemClickEvent() -> AAOptions {
let aaChartModel = AAChartModel()
.chartType(.column)
.stacking(.normal)
.colorsTheme(["#fe117c","#ffc069","#06caf4","#7dffc0"])//设置主题颜色数组
.markerRadius(0)
.series([
AASeriesElement()
.name("2017")
.data([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("2018")
.data([0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]),
AASeriesElement()
.name("2019")
.data([0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]),
AASeriesElement()
.name("2020")
.data([3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]),
])
let aaOptions = aaChartModel.aa_toAAOptions()
aaOptions.legend?
.enabled(true)
.align(.right)//设置图例位于水平方向上的右侧
.layout(.vertical)//设置图例排列方式为垂直排布
.verticalAlign(.top)//设置图例位于竖直方向上的顶部
//自定义图例点击事件
aaOptions.plotOptions?.series?.events = AAEvents()
.legendItemClick(#"""
function(event) {
function getVisibleMode(series, serieName) {
var allVisible = true;
var allHidden = true;
for (var i = 0; i < series.length; i++) {
if (series[i].name == serieName)
continue;
allVisible &= series[i].visible;
allHidden &= (!series[i].visible);
}
if (allVisible && !allHidden)
return 'all-visible';
if (allHidden && !allVisible)
return 'all-hidden';
return 'other-cases';
}
var series = this.chart.series;
var mode = getVisibleMode(series, this.name);
var enableDefault = false;
if (!this.visible) {
enableDefault = true;
}
else if (mode == 'all-visible') {
var seriesLength = series.length;
for (var i = 0; i < seriesLength; i++) {
var serie = series[i];
serie.hide();
}
this.show();
}
else if (mode == 'all-hidden') {
var seriesLength = series.length;
for (var i = 0; i < seriesLength; i++) {
var serie = series[i];
serie.show();
}
}
else {
enableDefault = true;
}
return enableDefault;
}
"""#)
return aaOptions
}
代码运行成功后的在线示例:
- http://code.hcharts.cn/rencht/hhhhLv/share
当然, 你也可以在 AAChartKit-Swift 的 demo 中运行查看自定义 legend 的点击事件的效果.
但是如果你想获取 legend 点击事件回调信息, 并且将回调信息传给原生的 Swift, 代码写起来还挺啰嗦的.
由于 legend 本身的绘制没有多少复杂度, 你完全可以隐藏图表自身的 legend 的, 然后使用 UIView 自定义一个原生的 legend, 然后自行处理相关的点击事件.