Переглянути джерело

Update CustomTooltipComposer.kt

AnAn 3 роки тому
батько
коміт
36c43d3466

+ 59 - 61
sample/src/main/java/com/github/aachartmodel/aainfographics/demo/chartcomposer/CustomTooltipComposer.kt

@@ -135,10 +135,10 @@ function () {
                 """
 function () {
         var s = '第' + '<b>' +  this.x + '</b>' + '年' + '<br/>';
-        var colorDot1 = '<span style=\"' + 'color:#1e90ff; font-size:13px\"' + '>◉</span> ';
-        var colorDot2 = '<span style=\"' + 'color:#ef476f; font-size:13px\"' + '>◉</span> ';
-        var s1 = colorDot1  + this.points[0].series.name + ': ' + this.points[0].y + '只' + '<br/>';
-        var s2 =  colorDot2 + this.points[1].series.name + ': ' + this.points[1].y + '棵';
+        let colorDot1 = '<span style=\"' + 'color:#1e90ff; font-size:13px\"' + '>◉</span> ';
+        let colorDot2 = '<span style=\"' + 'color:#ef476f; font-size:13px\"' + '>◉</span> ';
+        let s1 = colorDot1  + this.points[0].series.name + ': ' + this.points[0].y + '只' + '<br/>';
+        let s2 =  colorDot2 + this.points[1].series.name + ': ' + this.points[1].y + '棵';
         s += s1 + s2;
         return s;
     }
@@ -149,27 +149,38 @@ function () {
         return aaOptions
     }
 
+
     fun customAreaChartTooltipStyleWithColorfulHtmlLabels(): AAOptions {
         val aaChartModel = AAChartModel()
-            .chartType(AAChartType.Area)//图形类型
-            .title("2014 ~ 2020 汪星人生存指数")//图表主标题
-            .subtitle("数据来源:www.无任何可靠依据.com")//图表副标题
+            .chartType(AAChartType.Areaspline)//图形类型
+            .title("")//图表主标题
+            .subtitle("")//图表副标题
             .markerSymbolStyle(AAChartSymbolStyleType.BorderBlank)//折线连接点样式为外边缘空白
             .dataLabelsEnabled(false)
-            .categories(arrayOf("临床一期", "临床二期", "临床三期"))
+            .colorsTheme(arrayOf("#04d69f", "#1e90ff", "#ef476f", "#ffd066"))
+            .stacking(AAChartStackingType.Normal)
+            .markerRadius(0f)
             .series(arrayOf(
                 AASeriesElement()
-                    .name("上市")
-                    .data(arrayOf(0, 0, 7)),
+                    .name("Tokyo Hot")
+                    .lineWidth(5.0f)
+                    .fillOpacity(0.4f)
+                    .data(arrayOf(0.45, 0.43, 0.50, 0.55, 0.58, 0.62, 0.83, 0.39, 0.56, 0.67, 0.50, 0.34, 0.50, 0.67, 0.58, 0.29, 0.46, 0.23, 0.47, 0.46, 0.38, 0.56, 0.48, 0.36)),
                 AASeriesElement()
-                    .name("中止")
-                    .data(arrayOf(4, 5, 1)),
+                    .name("Berlin Hot")
+                    .lineWidth(5.0f)
+                    .fillOpacity(0.4f)
+                    .data(arrayOf(0.38, 0.31, 0.32, 0.32, 0.64, 0.66, 0.86, 0.47, 0.52, 0.75, 0.52, 0.56, 0.54, 0.60, 0.46, 0.63, 0.54, 0.51, 0.58, 0.64, 0.60, 0.45, 0.36, 0.67)),
                 AASeriesElement()
-                    .name("无进展")
-                    .data(arrayOf(2, 0, 1)),
+                    .name("New York Hot")
+                    .lineWidth(5.0f)
+                    .fillOpacity(0.4f)
+                    .data(arrayOf(0.46, 0.32, 0.53, 0.58, 0.86, 0.68, 0.85, 0.73, 0.69, 0.71, 0.91, 0.74, 0.60, 0.50, 0.39, 0.67, 0.55, 0.49, 0.65, 0.45, 0.64, 0.47, 0.63, 0.64)),
                 AASeriesElement()
-                    .name("进行中")
-                    .data(arrayOf(3, 5, 2))
+                    .name("London Hot")
+                    .lineWidth(5.0f)
+                    .fillOpacity(0.4f)
+                    .data(arrayOf(0.60, 0.51, 0.52, 0.53, 0.64, 0.84, 0.65, 0.68, 0.63, 0.47, 0.72, 0.60, 0.65, 0.74, 0.66, 0.65, 0.71, 0.59, 0.65, 0.77, 0.52, 0.53, 0.58, 0.53))
             ))
 
         val aaTooltip = AATooltip()
@@ -177,23 +188,23 @@ function () {
             .formatter(
                 """
 function () {
-        var colorDot0 = '<span style=\"' + 'color:red; font-size:13px\"' + '>◉</span> ';
-        var colorDot1 = '<span style=\"' + 'color:mediumspringgreen; font-size:13px\"' + '>◉</span> ';
-        var colorDot2 = '<span style=\"' + 'color:deepskyblue; font-size:13px\"' + '>◉</span> ';
-        var colorDot3 = '<span style=\"' + 'color:sandybrown; font-size:13px\"' + '>◉</span> ';
-        var colorDotArr = [colorDot0, colorDot1, colorDot2, colorDot3];
-        var wholeContentString = this.points[0].x + '<br/>';
-        for (var i = 0;i < 4;i++) {
-            var yValue = this.points[i].y;
+        let wholeContentStr ='<span style=\"' + 'color:lightGray; font-size:13px\"' + '>◉ Time: ' + this.x + ' year</span><br/>';
+        let length = this.points.length;
+        for (let i = 0; i < length; i++) {
+            let thisPoint = this.points[i];
+            let yValue = thisPoint.y;
             if (yValue != 0) {
-                var prefixStr = colorDotArr[i];
-                wholeContentString += prefixStr + this.points[i].series.name + ': ' + this.points[i].y + '<br/>';
+                let spanStyleStartStr = '<span style=\"' + 'color:'+ thisPoint.color + '; font-size:13px\"' + '>◉ ';
+                let spanStyleEndStr = '</span> <br/>';
+                wholeContentStr += spanStyleStartStr + thisPoint.series.name + ': ' + thisPoint.y + '℃' + spanStyleEndStr;
             }
         }
-        return wholeContentString;
+        return wholeContentStr;
     }
                 """.trimIndent()
             )
+            .backgroundColor("#050505")
+            .borderColor("#050505")
         val aaOptions = aaChartModel.aa_toAAOptions()
         aaOptions.tooltip = aaTooltip
         return aaOptions
@@ -201,59 +212,46 @@ function () {
 
     fun customLineChartTooltipStyleWhenValueBeZeroDoNotShow(): AAOptions {
         val aaChartModel = AAChartModel()
-            .chartType(AAChartType.Areaspline)//图形类型
-            .title("")//图表主标题
-            .subtitle("")//图表副标题
+            .chartType(AAChartType.Area)//图形类型
+            .title("2014 ~ 2020 汪星人生存指数")//图表主标题
+            .subtitle("数据来源:www.无任何可靠依据.com")//图表副标题
             .markerSymbolStyle(AAChartSymbolStyleType.BorderBlank)//折线连接点样式为外边缘空白
             .dataLabelsEnabled(false)
-            .colorsTheme(arrayOf("#04d69f", "#1e90ff", "#ef476f", "#ffd066"))
-            .stacking(AAChartStackingType.Normal)
-            .markerRadius(0f)
+            .categories(arrayOf("临床一期", "临床二期", "临床三期"))
             .series(arrayOf(
                 AASeriesElement()
-                    .name("Tokyo Hot")
-                    .lineWidth(5.0f)
-                    .fillOpacity(0.4f)
-                    .data(arrayOf(0.45, 0.43, 0.50, 0.55, 0.58, 0.62, 0.83, 0.39, 0.56, 0.67, 0.50, 0.34, 0.50, 0.67, 0.58, 0.29, 0.46, 0.23, 0.47, 0.46, 0.38, 0.56, 0.48, 0.36)),
+                    .name("上市")
+                    .data(arrayOf(0, 0, 7)),
                 AASeriesElement()
-                    .name("Berlin Hot")
-                    .lineWidth(5.0f)
-                    .fillOpacity(0.4f)
-                    .data(arrayOf(0.38, 0.31, 0.32, 0.32, 0.64, 0.66, 0.86, 0.47, 0.52, 0.75, 0.52, 0.56, 0.54, 0.60, 0.46, 0.63, 0.54, 0.51, 0.58, 0.64, 0.60, 0.45, 0.36, 0.67)),
+                    .name("中止")
+                    .data(arrayOf(4, 5, 1)),
                 AASeriesElement()
-                    .name("New York Hot")
-                    .lineWidth(5.0f)
-                    .fillOpacity(0.4f)
-                    .data(arrayOf(0.46, 0.32, 0.53, 0.58, 0.86, 0.68, 0.85, 0.73, 0.69, 0.71, 0.91, 0.74, 0.60, 0.50, 0.39, 0.67, 0.55, 0.49, 0.65, 0.45, 0.64, 0.47, 0.63, 0.64)),
+                    .name("无进展")
+                    .data(arrayOf(2, 0, 1)),
                 AASeriesElement()
-                    .name("London Hot")
-                    .lineWidth(5.0f)
-                    .fillOpacity(0.4f)
-                    .data(arrayOf(0.60, 0.51, 0.52, 0.53, 0.64, 0.84, 0.65, 0.68, 0.63, 0.47, 0.72, 0.60, 0.65, 0.74, 0.66, 0.65, 0.71, 0.59, 0.65, 0.77, 0.52, 0.53, 0.58, 0.53))
+                    .name("进行中")
+                    .data(arrayOf(3, 5, 2))
             ))
 
         val aaTooltip = AATooltip()
             .useHTML(true)
             .formatter(
                 """
-function () {
-        var colorsArr = ["mediumspringgreen", "deepskyblue", "red", "sandybrown"];
-        var wholeContentString ='<span style=\"' + 'color:lightGray; font-size:13px\"' + '>◉ Time: ' + this.x + ' year</span><br/>';
-        for (var i = 0;i < 4;i++) {
-            var thisPoint = this.points[i];
-            var yValue = thisPoint.y;
+    function () {
+        let wholeContentStr = this.points[0].x + '<br/>';
+        let length = this.points.length;
+        for (let i = 0; i < length; i++) {
+            let thisPoint = this.points[i];
+            let yValue = thisPoint.y;
             if (yValue != 0) {
-                var spanStyleStartStr = '<span style=\"' + 'color:'+ colorsArr[i] + '; font-size:13px\"' + '>◉ ';
-                var spanStyleEndStr = '</span> <br/>';
-                wholeContentString += spanStyleStartStr + thisPoint.series.name + ': ' + thisPoint.y + '℃' + spanStyleEndStr;
+                let prefixStr = '<span style=\"' + 'color:'+ thisPoint.color + '; font-size:13px\"' + '>◉ ';
+                wholeContentStr += prefixStr + thisPoint.series.name + ': ' + yValue + '<br/>';
             }
         }
-        return wholeContentString;
+        return wholeContentStr;
     }
                 """.trimIndent()
             )
-            .backgroundColor("#050505")
-            .borderColor("#050505")
         val aaOptions = aaChartModel.aa_toAAOptions()
         aaOptions.tooltip = aaTooltip
         return aaOptions