Fix #1557

AAChartModel · Aug 2, 2024 · a48592b · a48592b
1 parent e6808eb
commit a48592b
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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];