<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.github

你试试直接: 将你的 AAChartModel 转换成 AAOptions, 然后修改最大值最小值,</l

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

Swift 版本的 AAChartKit-Swift 中的这个问题 <a class="issue-link js-issue-link" data-error-text=

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

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

所以,参考以上所有内容, 回到你的问题: 你试试直接: 将你的 AAChartModel

想咨询一下一些问题AAOption的使用方法 about aachartcore-kotlin HOT 11 CLOSED

aachartmodel commented on May 18, 2024

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

from aachartcore-kotlin.

Comments (11)

AAChartModel commented on May 18, 2024

你试试直接:

将你的 AAChartModel 转换成 AAOptions,
然后修改最大值最小值,
最后调用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)

看看是否有用

from aachartcore-kotlin.

longzhitao commented on May 18, 2024

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

from aachartcore-kotlin.

AAChartModel commented on May 18, 2024

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

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

from aachartcore-kotlin.

AAChartModel commented on May 18, 2024

好在 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
        }

绘图效果

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

from aachartcore-kotlin.

AAChartModel commented on May 18, 2024

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 中也有此示例, 下载运行查看即可.

from aachartcore-kotlin.

AAChartModel commented on May 18, 2024

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

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

from aachartcore-kotlin.

AAChartModel commented on May 18, 2024

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

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

from aachartcore-kotlin.

AAChartModel commented on May 18, 2024

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

你试试直接:

将你的 AAChartModel 转换成 AAOptions,
然后修改最大值最小值,并且修改X轴的 labels 的 formatter 属性
最后调用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)

看看是否有用

from aachartcore-kotlin.

AAChartModel commented on May 18, 2024

Tips 附言:

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

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

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

from aachartcore-kotlin.

longzhitao commented on May 18, 2024

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

from aachartcore-kotlin.

AAChartModel commented on May 18, 2024

tips附言:

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

        aaChartModel
            .markerSymbol(AAChartSymbolType.Circle)

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

from aachartcore-kotlin.

想咨询一下一些问题AAOption的使用方法 about aachartcore-kotlin HOT 11 CLOSED

Comments (11)

Sample 2

Final Chart content

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent