weixin_39953100
weixin_39953100
2021-01-10 15:35

[提问贴] 只显示图表峰谷值(最大值和最小值)dataLabels

请问各位仁兄,如何设置才能让图表只显示峰谷值?

该提问来源于开源项目:AAChartModel/AAChartKit

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

16条回答

  • weixin_39522103 weixin_39522103 3月前

    最终绘图效果

    image

    点赞 评论 复制链接分享
  • weixin_39522103 weixin_39522103 3月前

    这种方法的好处在于你不用自己关心 data 数组中哪个是最大值,哪个是最小值了.因为 JavaScript 函数已经帮你算好了.

    点赞 评论 复制链接分享
  • weixin_39953100 weixin_39953100 3月前

    好的好的,万分感谢,受教受教了!

    点赞 评论 复制链接分享
  • weixin_39953100 weixin_39953100 3月前

    尝试了一下这个js方法,执行了但是图表上没有显示

    点赞 评论 复制链接分享
  • weixin_39953100 weixin_39953100 3月前

    请问是与什么属性冲突吗?

    点赞 评论 复制链接分享
  • weixin_39522103 weixin_39522103 3月前

    AAChartKit 的 demo 我刚刚更新提交了此示例,你下载运行看看,然后带入你自己的数据,看看有什么问题

    点赞 评论 复制链接分享
  • weixin_39953100 weixin_39953100 3月前

    好的,我去看下!感谢!

    点赞 评论 复制链接分享
  • weixin_39953100 weixin_39953100 3月前

    作者您好,我发现可能还是我设置有误存在一个这样的问题,比如如果是我刚初始化就把seriesSet数据设置好了那么就会显示最大最小值,不然比如我从网络请求拿到数据再self.aaChartModel.series = seriesArr;[self.aaChartView aa_drawChartWithChartModel:self.aaChartModel];这种则不会显示最大最小值

    点赞 评论 复制链接分享
  • weixin_39522103 weixin_39522103 3月前

    此示例可供参考 https://github.com/AAChartModel/AAChartKit/issues/589#issuecomment-481607712

    点赞 评论 复制链接分享
  • weixin_39522103 weixin_39522103 3月前

    代码太多了,比较恶心,哈哈哈😄😄😄

    点赞 评论 复制链接分享
  • weixin_39522103 weixin_39522103 3月前

    其实这个在线示例的方法

    https://jshare.com.cn/hcharts.cn/hhhhov

    也同样可以实现标记最大值,最小值

    点赞 评论 复制链接分享
  • weixin_39522103 weixin_39522103 3月前

    这是 AAChartKit中 对应的实现方法

    1. 配置 AAChartModel

    objc
    
        _aaChartModel = AAChartModel.new
        .chartTypeSet(AAChartTypeLine)//图表类型
        .titleSet(@"")//图表主标题
        .subtitleSet(@"")//图表副标题
        .yAxisLineWidthSet()//Y轴轴线线宽为0即是隐藏Y轴轴线
        .yAxisTitleSet(@"")//设置 Y 轴标题
        .tooltipValueSuffixSet(@"℃")//设置浮动提示框单位后缀
        .yAxisGridLineWidthSet()//y轴横向分割线宽度为0(即是隐藏分割线)
        .yAxisMaxSet()
        .markerRadiusSet()
        .markerSymbolSet(AAChartSymbolTypeCircle)
        .markerSymbolStyleSet(AAChartSymbolStyleTypeInnerBlank)
        .seriesSet(@[
                     AASeriesElement.new
                     .nameSet(@"2017")
                     .lineWidthSet()
                     .dataSet(@[, , , , , , , , , , , , , , , , , , , , , , , ]),
                     ]
                   );
    

    2. 绘制图表

    objc
        [_aaChartView aa_drawChartWithChartModel:_aaChartModel];
    
    
    

    3. 在代理方法中执行 JavaScript 方法

    js
    #pragma mark -- AAChartView delegate
    - (void)aaChartViewDidFinishLoad:(AAChartView *)aaChartView {
        NSLog(@"🔥🔥🔥🔥🔥 AAChartView content did finish load!!!");
    
        NSString *jsStr = [self configureMaxMiniDataLabelJSFunctionString];
        [self.aaChartView aa_evaluateJavaScriptStringFunction:jsStr];
    }
    
    #pragma mark -- Configure JavaScript function string
    
    - (NSString *)configureMaxMiniDataLabelJSFunctionString {
        //refer to highcharts sample  https://jshare.com.cn/hcharts.cn/hhhhov
        NSString *jsFunctionStr =
        ((
    function render(aaGlobalChart, point, text) {
        return aaGlobalChart.renderer
        .label(text
               + ': '
               + point.y, point.plotX
               + aaGlobalChart.plotLeft
               - 20,
    
               point.plotY
               + aaGlobalChart.plotTop - 45,
    
               'callout', point.plotX
               + aaGlobalChart.plotLeft,
    
               point.plotY
               + aaGlobalChart.plotTop)
        .css({
            color: '#FFFFFF',
            align: 'center',
        })
        .attr({
            fill: 'rgba(0, 0, 0, 0.75)',
            padding: 8,
            r: 5,
            zIndex: 6
        }).add();
    }
    
    function renderMinMaxLabel(aaGlobalChart) {
        var min = 1000,
        max = 0,
        pointsToShow = [0, 0],
        points = aaGlobalChart.series[0].points;
        Highcharts.each(points,
        function(p) {
            if (p.y > max) {
                pointsToShow[0] = p.index;
                max = p.y;
            }
            if (p.y < min) {
                pointsToShow[1] = p.index;
                min = p.y;
            }
        });
        var maxValuePoint = points[pointsToShow[0]];
        var minValuePoint = points[pointsToShow[1]];
        render(aaGlobalChart, maxValuePoint, 'Max Value');
        render(aaGlobalChart, minValuePoint, 'Min Value');
    }
    
        renderMinMaxLabel(aaGlobalChart);));
    
        return jsFunctionStr;
    }
    
    
    点赞 评论 复制链接分享
  • weixin_39953100 weixin_39953100 3月前

    WechatIMG1 手绘的哈哈 ,就是只想把峰谷值显示在对应位置,方便的话可以加下QQ吗?我的是:289162875

    点赞 评论 复制链接分享
  • weixin_39953100 weixin_39953100 3月前

    dataLabelsEnabled属性会把所有的数据都显示出来,但是需求是只显示最大最小值,请问您有什么解决方案吗?

    点赞 评论 复制链接分享
  • weixin_39953100 weixin_39953100 3月前

    好的,我看一下,非常感谢您!

    点赞 评论 复制链接分享
  • weixin_39522103 weixin_39522103 3月前

    给个设计稿看看👀

    点赞 评论 复制链接分享