Browse Source

Add configureECGStyleChart sample

An An 2 years ago
parent
commit
ea66a5fe31

+ 2 - 1
charts/src/main/java/com/github/aachartmodel/aainfographics/aaoptionsmodel/AAAxis.kt

@@ -27,6 +27,7 @@ enum class AAChartAxisType(val value: String) {
     var min: Number? = null //坐标轴最小值(设置为0就不会有负数)
     var minRange: Int? = null
     var minTickInterval: Int? = null //The minimum tick interval allowed in axis values. For example on zooming in on an axis with daily data, this can be used to prevent the axis from showing hours. Defaults to the closest distance between two points on the axis.
+    var minorTicks: Boolean? = null //是否显示副刻度
     var minorGridLineColor: String? = null //Color of the minor, secondary grid lines.
     var minorGridLineDashStyle: String? = null //The dash or dot style of the minor grid lines.
     var minorGridLineWidth: Number? = null //Width of the minor, secondary grid lines.
@@ -47,7 +48,7 @@ enum class AAChartAxisType(val value: String) {
     var visible: Boolean? = null //用于设置坐标轴以及坐标轴文字是否显示
     var startOnTick: Boolean? = null //Whether to force the axis to start on a tick. Use this option with the minPadding option to control the axis start. 默认是:false.
     var tickColor: String? = null //坐标轴轴线下方刻度线颜色
-    var tickInterval: Int? = null //坐标轴刻度点间隔数(设置每隔几个点显示一个 坐标轴的内容:
+    var tickInterval: Number? = null //坐标轴刻度点间隔数(设置每隔几个点显示一个 坐标轴的内容:
     var tickmarkPlacement: String? = null //本参数只对分类轴有效。 当值为 on 时刻度线将在分类上方显示;当值为 between 时,刻度线将在两个分类中间显示。当 tickInterval 为 1 时,默认是 between,其他情况默认是 on。 默认是:null.
     var tickWidth: Number? = null //坐标轴刻度线的宽度,设置为 0 时则不显示刻度线
     var tickLength: Number? = null //坐标轴刻度线的长度。 默认是:10.

+ 6 - 1
charts/src/main/java/com/github/aachartmodel/aainfographics/aaoptionsmodel/AAXAxis.kt

@@ -125,6 +125,11 @@ class AAXAxis: AAAxis() {
         return this
     }
 
+    fun minorTicks(prop: Boolean?): AAXAxis {
+        minorTicks = prop
+        return this
+    }
+
     fun minorGridLineColor(prop: String?): AAXAxis {
         minorGridLineColor = prop
         return this
@@ -190,7 +195,7 @@ class AAXAxis: AAAxis() {
         return this
     }
 
-    fun tickInterval(prop: Int?): AAXAxis {
+    fun tickInterval(prop: Number?): AAXAxis {
         tickInterval = prop
         return this
     }

+ 6 - 1
charts/src/main/java/com/github/aachartmodel/aainfographics/aaoptionsmodel/AAYAxis.kt

@@ -131,6 +131,11 @@ class AAYAxis: AAAxis() {
         return this
     }
 
+    fun minorTicks(prop: Boolean?): AAYAxis {
+        minorTicks = prop
+        return this
+    }
+
     fun minorGridLineColor(prop: String?): AAYAxis {
         minorGridLineColor = prop
         return this
@@ -196,7 +201,7 @@ class AAYAxis: AAAxis() {
         return this
     }
 
-    fun tickInterval(prop: Int?): AAYAxis {
+    fun tickInterval(prop: Number?): AAYAxis {
         tickInterval = prop
         return this
     }

+ 2 - 0
sample/src/main/java/com/github/aachartmodel/aainfographics/demo/additionalcontent/JSFunctionForAAChartEventsActivity.kt

@@ -9,6 +9,7 @@ import com.github.aachartmodel.aainfographics.demo.chartcomposer.JSFunctionForAA
 import com.github.aachartmodel.aainfographics.demo.chartcomposer.JSFunctionForAAChartEventsComposer.advancedTimeLineChart
 import com.github.aachartmodel.aainfographics.demo.chartcomposer.JSFunctionForAAChartEventsComposer.automaticallyHideTooltipAfterItIsShown
 import com.github.aachartmodel.aainfographics.demo.chartcomposer.JSFunctionForAAChartEventsComposer.configureBlinkMarkerChart
+import com.github.aachartmodel.aainfographics.demo.chartcomposer.JSFunctionForAAChartEventsComposer.configureECGStyleChart
 import com.github.aachartmodel.aainfographics.demo.chartcomposer.JSFunctionForAAChartEventsComposer.configureScatterChartWithBlinkEffect
 import com.github.aachartmodel.aainfographics.demo.chartcomposer.JSFunctionForAAChartEventsComposer.configureSpecialStyleMarkerOfSingleDataElementChartWithBlinkEffect
 import com.github.aachartmodel.aainfographics.demo.chartcomposer.JSFunctionForAAChartEventsComposer.customizeYAxisPlotLinesLabelBeSpecialStyle
@@ -39,6 +40,7 @@ class JSFunctionForAAChartEventsActivity : AppCompatActivity() {
             "automaticallyHideTooltipAfterItIsShown" -> return automaticallyHideTooltipAfterItIsShown() //图表加载完成后,自动隐藏浮动提示框
             "dynamicHeightGridLineAreaChart" -> return dynamicHeightGridLineAreaChart() //动态高度网格线的区域填充图
             "customizeYAxisPlotLinesLabelBeSpecialStyle" -> return customizeYAxisPlotLinesLabelBeSpecialStyle() //自定义 Y 轴轴线上面的标签文字特殊样式
+            "configureECGStyleChart" -> return configureECGStyleChart() //配置 ECG 样式的图表
         }
         return setCrosshairAndTooltipToTheDefaultPositionAfterLoadingChart()
     }

+ 4 - 2
sample/src/main/java/com/github/aachartmodel/aainfographics/demo/basiccontent/MainActivity.kt

@@ -198,7 +198,8 @@ class MainActivity : AppCompatActivity() {
                 "configureScatterChartWithBlinkEffect---配置闪烁特效的散点图",
                 "automaticallyHideTooltipAfterItIsShown---在浮动提示框显示后自动隐藏",
                 "dynamicHeightGridLineAreaChart---动态高度的网格线区域填充图",
-                "customizeYAxisPlotLinesLabelBeSpecialStyle---自定义 Y 轴轴线上面的标签文字特殊样式"
+                "customizeYAxisPlotLinesLabelBeSpecialStyle---自定义 Y 轴轴线上面的标签文字特殊样式",
+                "configureECGStyleChart---配置心电图样式图表",
             ),
             /*JS Function For AAOptions*/
             arrayOf(
@@ -399,7 +400,8 @@ class MainActivity : AppCompatActivity() {
                 "configureScatterChartWithBlinkEffect",
                 "automaticallyHideTooltipAfterItIsShown",
                 "dynamicHeightGridLineAreaChart",
-                "customizeYAxisPlotLinesLabelBeSpecialStyle"
+                "customizeYAxisPlotLinesLabelBeSpecialStyle",
+                "configureECGStyleChart"
             ),
 
             arrayOf( /*JS Function For AAOptions*/

+ 53 - 0
sample/src/main/java/com/github/aachartmodel/aainfographics/demo/chartcomposer/JSFunctionForAAChartEventsComposer.kt

@@ -1082,5 +1082,58 @@ object JSFunctionForAAChartEventsComposer {
                     AASeriesElement()
                         .data(arrayOf(2, 5, 2, 3, 6))))
     }
+
+    //https://stackoverflow.com/questions/47392848/set-ecg-paper-like-grid-intervals-highcharts-js
+    fun configureECGStyleChart(): AAOptions {
+        return AAOptions()
+            .chart(
+                AAChart()
+                    .events(
+                        AAChartEvents()
+                            .render(
+                                """
+   function () {
+       const chart = this;
+       const axes = chart.axes;
+       let showMinorTicks = true;
+
+       axes.forEach((a) => {
+               if (Object.keys(a.minorTicks).length === 0) {
+                   showMinorTicks = false;
+               }
+       });
+
+       axes.forEach((a) => {
+               for (var key in a.minorTicks) {
+                   var mt = a.minorTicks[key].gridLine;
+                   showMinorTicks ? mt.show() : mt.hide();
+               }
+       });
+   }"""
+                            )
+                    )
+            )
+            .xAxis(
+                AAXAxis()
+                    .tickInterval(0.5f)
+                    .minorTicks(true)
+                    .minorTickInterval(0.1f)
+                    .gridLineWidth(1)
+                    .gridLineColor("#ff0000")
+            )
+            .yAxis(
+                AAYAxis()
+                    .tickInterval(0.5f)
+                    .minorTicks(true)
+                    .minorTickInterval(0.1f)
+                    .gridLineWidth(1)
+                    .gridLineColor("#ff0000")
+            )
+            .series(arrayOf(
+                    AASeriesElement()
+                        .data(arrayOf(1, 3, 4, 6, 1, 2, 2, 6, 1, 1, 1, 4, 6))
+                )
+            )
+    }
 }