想咨询一下一些问题AAOption的使用方法

[longzhitao]

我这样设置最大值还是不变

散点图或折线图的x轴是否能以时间序列展示
比如（"14:55", 11）, ("15:55", 12)这样子
十分感谢

[AAChartModel]

你试试直接:

1. 将你的 AAChartModel 转换成 AAOptions,
2. 然后修改最大值最小值,
3. 最后调用aa_drawChartWithChartOptions

//1. 将你的 AAChartModel 转换成 AAOptions,
val aaOptions = aaChartModel.aa_toAAOptions()

//2. 然后修改最大值最小值,
aaOptions.xAxis
    ?.min(0f)
    ?.max(1440f)
    ?.tickInterval(360)

//3. 最后调用`aa_drawChartWithChartOptions`
aaChartView.aa_drawChartWithChartOptions(aaOptions)

看看是否有用

[longzhitao]

十分感谢 关于AAOptions的用法可以了，关于x轴时间序列我想办法将下面的categories改成在这样，但是只有第一个刻度显示正确，是不是用法用错了，麻烦您了

[AAChartModel]

Highcharts 理论上, 只要你 X 轴有多少个刻度, 你的 categories 数组就得要有多少个元素. 只有这样, X轴的刻度和categories 数组中的元素才能一一对应起来.

所以你现在的 X轴的刻度为 1440, 那么你的 X轴的categories 数组的元素就应该有 1440 个. 不过由于这 1440 个元素,实际上只要显示 5 个, 所以直接为categories 数组添加 1440 个元素就太傻帽了.

[AAChartModel]

好在 X轴和 Y轴都有一个formatter属性,支持通过 JavaScript 函数来格式化 categories 的文字内容.

参考 iOS 版本 AAChartKit 的issue 问题: AAChartModel/AAChartKit#675

其中 这段内容 AAChartModel/AAChartKit#675 (comment) 对应的 kotlin 版本如下:

1.配置AAOptions实例对象

         fun customYAxisLabels():AAOptions {
            val aaChartModel = AAChartModel()
                .chartType(AAChartType.Line)//图形类型
                .title("")//图表主标题
                .subtitle("")//图表副标题
                .markerSymbolStyle(AAChartSymbolStyleType.BorderBlank)//折线连接点样式为外边缘空白
                .dataLabelsEnabled(false)
                .colorsTheme(arrayOf("#04d69f", "#1e90ff", "#ef476f", "#ffd066"))
                .stacking(AAChartStackingType.Normal)
                .markerRadius(8f)
                .series(arrayOf(
                    AASeriesElement()
                    .name("Tokyo Hot")
                    .lineWidth(5.0f)
                    .fillOpacity(0.4f)
                    .data(arrayOf(29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4))))

            val aaYAxisLabels = AALabels()
                .formatter("""
function () {
        var yValue = this.value;
        if (yValue >= 200) {
            return "极佳";
        } else if (yValue >= 150 && yValue < 200) {
            return "非常棒";
        } else if (yValue >= 100 && yValue < 150) {
            return "相当棒";
        } else if (yValue >= 50 && yValue < 100) {
            return "还不错";
        } else {
            return "一般";
        }
    }
                """.trimIndent()
                )

            val aaOptions = aaChartModel.aa_toAAOptions()
            aaOptions.yAxis?.labels(aaYAxisLabels)

            return aaOptions
        }

2. 绘图效果

AAChartCore-Kotlin 的 demo 中有此示例, 下载运行查看即可.

[AAChartModel]

Swift 版本的 AAChartKit-Swift 中的这个问题 AAChartModel/AAChartKit-Swift#232

其中第二个示例Y轴也是固定的几个点, 作为你的参考示例是更适合的. 这个 issue 中的第二个示例对应的 kotlin 版本为:

Sample 2

         fun customYAxisLabels2():AAOptions {
            val aaChartModel = AAChartModel()
                .chartType(AAChartType.Line)//图形类型
                .title("")//图表主标题
                .subtitle("")//图表副标题
                .markerSymbolStyle(AAChartSymbolStyleType.BorderBlank)//折线连接点样式为外边缘空白
                .dataLabelsEnabled(false)
                .colorsTheme(arrayOf("#04d69f", "#1e90ff", "#ef476f", "#ffd066"))
                .stacking(AAChartStackingType.Normal)
                .markerRadius(8f)
                .series(arrayOf(AASeriesElement()
                    .name("Tokyo Hot")
                    .lineWidth(5.0f)
                    .fillOpacity(0.4f)
                    .data(arrayOf(229.9, 771.5, 1106.4, 1129.2, 6644.0, 1176.0, 8835.6, 148.5, 8816.4, 6694.1, 7795.6, 9954.4))))

            val aaYAxisLabels = AALabels()
                .style(AAStyle()
                    .fontSize(10f)
                    .fontWeight(AAChartFontWeightType.Bold)
                    .color(AAColor.Gray))
                .formatter("""
function () {
        var yValue = this.value;
        if (yValue == 0) {
            return "0";
        } else if (yValue == 2500) {
            return "25%";
        } else if (yValue == 5000) {
            return "50%";
        } else if (yValue == 7500) {
            return "75%";
        } else if (yValue == 10000) {
            return "100%";
        }
    }
                """.trimIndent()
                )

            val aaOptions = aaChartModel.aa_toAAOptions()
            aaOptions.yAxis!!
                .opposite(true)
                .tickWidth(2f)
                .lineWidth(1.5f)//Y轴轴线颜色
                .lineColor(AAColor.LightGray)//Y轴轴线颜色
                .gridLineWidth(0f)//Y轴网格线宽度
                .tickPositions(arrayOf(0, 2500, 5000, 7500, 10000))
                .labels(aaYAxisLabels)

            return aaOptions
        }

Final Chart content

AAChartCore-Kotlin 的 demo 中也有此示例, 下载运行查看即可.

[AAChartModel]

关于 Y 轴的 labels 格式化属性的在线文档, 参考

1. format : https://api.highcharts.com/highcharts/yAxis.labels.format
2. formatter : https://api.highcharts.com/highcharts/yAxis.labels.formatter

[AAChartModel]

关于 X 轴的 labels 格式化属性的在线文档, 参考

1. format : https://api.highcharts.com/highcharts/xAxis.labels.format
2. formatter : https://api.highcharts.com/highcharts/xAxis.labels.formatter

[AAChartModel]

所以,参考以上所有内容, 回到你的问题:

你试试直接:

1. 将你的 AAChartModel 转换成 AAOptions,
2. 然后修改最大值最小值,并且修改X轴的 labels 的 formatter 属性
3. 最后调用aa_drawChartWithChartOptions

//1. 将你的 AAChartModel 转换成 AAOptions,
             val aaOptions = aaChartModel.aa_toAAOptions()

//2. 然后修改最大值最小值,并且修改X轴的 labels 的 formatter 属性
             aaOptions.xAxis
                 ?.min(0f)
                 ?.max(1440f)
                 ?.tickInterval(360)
                 ?.labels(AALabels()
                     .formatter("""
function () {
        var xValue = this.value;
        if (xValue == 0) {
            return "00:00";
        } else if (xValue == 360) {
            return "06:00";
        } else if (xValue == 720) {
            return "12:00";
        } else if (xValue == 1080) {
            return "18:00";
        } else if (xValue == 1440) {
            return "00:00";
        }
    }
                """.trimIndent()
                     ))

//3. 最后调用`aa_drawChartWithChartOptions`
             aaChartView.aa_drawChartWithChartOptions(aaOptions)

看看是否有用

[AAChartModel]

Tips 附言:

你后面提问题的时候,如果需要粘贴代码,请直接复制代码文本,并使用 markdown 语法(GitHub 的 issue 区默认支持 markdown 语法)使得代码高亮.不要像这样

粘贴代码图片,这样加载速度慢不说, 同时不利于我复制粘贴代码,复现问题.

markdown 语法参考链接 https://www.jianshu.com/p/ebe52d2d468f

[longzhitao]

了解了， 修改labels的formatter可以实现这个效果，十分感谢，麻烦您了，后面提出提出问题我会注意复制代码文本

[AAChartModel]

tips附言:

AAChartModel 的属性markerSymbol可以直接设置图表 marker 点的类型对所有 AASeriesElement 元素有效,就像下面这样设置即可

        aaChartModel
            .markerSymbol(AAChartSymbolType.Circle)

这样就不用重复对每个AASeriesElement 的 marker 属性都反复设置 AAMarker().symbol("circle")了