diff --git a/AAChartKitDemo/Demo/AAOptionsWithJS/JSFunctionForAAChartEventsComposer2.h b/AAChartKitDemo/Demo/AAOptionsWithJS/JSFunctionForAAChartEventsComposer2.h index 8cd7f46fd..4a0c2d055 100644 --- a/AAChartKitDemo/Demo/AAOptionsWithJS/JSFunctionForAAChartEventsComposer2.h +++ b/AAChartKitDemo/Demo/AAOptionsWithJS/JSFunctionForAAChartEventsComposer2.h @@ -17,6 +17,7 @@ NS_ASSUME_NONNULL_BEGIN + (AAOptions *)addClickEventToXAxisLabelAndAccessData; + (AAOptions *)defaultSelectedAPointForLineChart; + (AAOptions *)configureBlinkMarkerChart; ++ (AAOptions *)toggleDataLabelsOnTouch; @end diff --git a/AAChartKitDemo/Demo/AAOptionsWithJS/JSFunctionForAAChartEventsComposer2.m b/AAChartKitDemo/Demo/AAOptionsWithJS/JSFunctionForAAChartEventsComposer2.m index 410462414..9247e6eb4 100644 --- a/AAChartKitDemo/Demo/AAOptionsWithJS/JSFunctionForAAChartEventsComposer2.m +++ b/AAChartKitDemo/Demo/AAOptionsWithJS/JSFunctionForAAChartEventsComposer2.m @@ -182,5 +182,97 @@ + (AAOptions *)configureBlinkMarkerChart { return options; } +//https://developer.mozilla.org/zh-CN/docs/Web/API/Touch_events/Using_Touch_Events +//https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent +/* +在 JavaScript 中,与触摸事件对应的鼠标事件分别是: + +- `touchstart` 对应 `mousedown` +- `touchend` 对应 `mouseup` + +因此,将你的代码中的触摸事件改为鼠标事件后,代码可以改写为: + + + 1. +```javascript +// 监听 mousedown 事件 +container.addEventListener('mousedown', function() { + hideDataLabels(chart); +}); + +// 监听 mouseup 事件 +container.addEventListener('mouseup', function() { + showDataLabels(chart); +}); +``` + +或者也可以改成为: + + 2. + ```javascript + // 监听 mouseenter 事件 + container.addEventListener('mouseenter', function() { + hideDataLabels(chart); + }); + + // 监听 mouseleave 事件 + container.addEventListener('mouseleave', function() { + showDataLabels(chart); + }); + ``` +*/ ++ (AAOptions *)toggleDataLabelsOnTouch { + AAOptions *options = AAOptions.new + .chartSet(AAChart.new + .typeSet(AAChartTypeAreaspline) + .eventsSet(AAChartEvents.new + .loadSet(@AAJSFunc(function() { + const chart = this; + const container = document.getElementById('container'); + + // 监听 touchstart 事件 + container.addEventListener('touchstart', function() { + hideDataLabels(chart); + }); + + // 监听 touchend 事件 + container.addEventListener('touchend', function() { + showDataLabels(chart); + }); + + // 隐藏所有数据标签 + function hideDataLabels(chart) { + chart.series.forEach(function(series) { + series.data.forEach(function(point) { + point.update({ dataLabels: { enabled: false } }); + }); + }); + } + + // 显示所有数据标签 + function showDataLabels(chart) { + chart.series.forEach(function(series) { + series.data.forEach(function(point) { + point.update({ dataLabels: { enabled: true } }); + }); + }); + } + })))) + .xAxisSet(AAXAxis.new + .categoriesSet(@[@"一月", @"二月", @"三月", @"四月", @"五月", @"六月", @"七月", @"八月", @"九月", @"十月", @"十一月", @"十二月"])) + .seriesSet(@[ + AASeriesElement.new + .dataSet(@[@7.0, @6.9, @2.5, @14.5, @18.2, @21.5, @5.2, @26.5, @23.3, @45.3, @13.9, @9.6]) + .dataLabelsSet(AADataLabels.new + .enabledSet(true)) + .markerSet(AAMarker.new + .lineColorSet(AAColor.redColor) + .lineWidthSet(@3) + .radiusSet(@10)) + ]); + + return options; +} + @end diff --git a/AAChartKitDemo/Demo/AAOptionsWithJS/JSFunctionForAAChartEventsVC.m b/AAChartKitDemo/Demo/AAOptionsWithJS/JSFunctionForAAChartEventsVC.m index 78a6c49a7..1404fb4e2 100644 --- a/AAChartKitDemo/Demo/AAOptionsWithJS/JSFunctionForAAChartEventsVC.m +++ b/AAChartKitDemo/Demo/AAOptionsWithJS/JSFunctionForAAChartEventsVC.m @@ -63,7 +63,7 @@ - (id)chartConfigurationWithSelectedIndex:(NSUInteger)selectedIndex { case 10: return [self configureTheSizeOfTheSliceOfDonutAndPieChart]; //配置环形图和饼图的扇区大小 // case 11: return [self configurePlotBackgroundClickEvent]; //配置绘图区的点击事件 // case 11: return [JSFunctionForAAChartEventsComposer2 defaultSelectedAPointForLineChart]; - case 11: return [JSFunctionForAAChartEventsComposer2 configureBlinkMarkerChart]; + case 11: return [JSFunctionForAAChartEventsComposer2 toggleDataLabelsOnTouch];