oc，柱状图如何实现默认选中某一项，且点击状态下的柱状图颜色标为黑色，其余未被点击的柱状图颜色为灰色 #1433

spikeroog · 2022-12-28T02:43:24Z

oc，柱状图如何实现默认选中某一项，且点击状态下的柱状图颜色标为黑色，其余未被点击的柱状图颜色为灰色

AAChartModel · 2022-12-30T03:43:55Z

oc，柱状图如何实现默认选中某一项

参考:

如何设置默认选中某一个项，而不需要点击 AAChartKit-Swift#345

OC 版本的示例代码如下:

//https://github.com/AAChartModel/AAChartKit-Swift/issues/345
- (AAOptions *)setCrosshairAndTooltipToTheDefaultPositionAfterLoadingChart {
    AAChartModel *aaChartModel = AAChartModel.new
    .chartTypeSet(AAChartTypeAreaspline)//图表类型
    .colorsThemeSet(@[@"#04d69f",@"#1e90ff",@"#ef476f",@"#ffd066",])
    .stackingSet(AAChartStackingTypeNormal)
    .yAxisVisibleSet(false)
    .markerRadiusSet(@0)
    .seriesSet(@[
        AASeriesElement.new
        .nameSet(@"Tokyo Hot")
        .lineWidthSet(@5.0)
        .fillOpacitySet(@0.4)
        .dataSet(@[@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.new
        .nameSet(@"Berlin Hot")
        .lineWidthSet(@5.0)
        .fillOpacitySet(@0.4)
        .dataSet(@[@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.new
        .nameSet(@"London Hot")
        .lineWidthSet(@5.0)
        .fillOpacitySet(@0.4)
        .dataSet(@[@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.new
        .nameSet(@"NewYork Hot")
        .lineWidthSet(@5.0)
        .fillOpacitySet(@0.4)
        .dataSet(@[@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]),
    ]);
    
    AAOptions *aaOptions = aaChartModel.aa_toAAOptions;
    
    aaOptions.tooltip
        .styleSet(AAStyleColor(AAColor.whiteColor))
        .backgroundColorSet(@"#050505")
        .borderColorSet(@"#050505");
    
    aaOptions.xAxis
        .crosshairSet(AACrosshair.new
            .colorSet(AAColor.darkGrayColor)
            .dashStyleSet(AAChartLineDashStyleTypeLongDashDotDot)
            .widthSet(@2));
    
    //默认选中的位置索引
    NSUInteger defaultSelectedIndex = 5;
    
    //https://api.highcharts.com/highcharts/chart.events.load
    //https://www.highcharts.com/forum/viewtopic.php?t=36508
    aaOptions.chart
        .eventsSet(AAChartEvents.new
            .loadSet([NSString stringWithFormat:@AAJSFunc(function() {
                const points = [];
                const chart = this;
                const series = chart.series;
                const length = series.length;
                           
                for (let i = 0; i < length; i++) {
                    const pointElement = series[i].data[%ld];
                    points.push(pointElement);
                }
                chart.xAxis[0].drawCrosshair(null, points[0]);
                chart.tooltip.refresh(points);
                       }), defaultSelectedIndex]));
    
    
    return aaOptions;
}

AAChartModel · 2022-12-30T03:46:15Z

且点击状态下的柱状图颜色标为黑色，其余未被点击的柱状图颜色为灰色

参考:

请问我可以用 AAChartKit 实现类似于下图这种点击的柱状图高亮的效果吗 AAChartKit-Swift#365

OC 版本的示例代码如下:

//https://github.com/AAChartModel/AAChartKit-Swift/issues/365
//https://api.highcharts.com/highcharts/tooltip.formatter
//Callback function to format the text of the tooltip from scratch. In case of single or shared tooltips,
//a string should be returned. In case of split tooltips, it should return an array where the first item
//is the header, and subsequent items are mapped to the points. Return `false` to disable tooltip for a
//specific point on series.
- (AAOptions *)customColumnChartBorderStyleAndStatesHoverColor {
    AAChartModel *aaChartModel = AAChartModel.new
        .chartTypeSet(AAChartTypeColumn)
        .stackingSet(AAChartStackingTypeNormal)
        .colorsThemeSet(@[AAColor.darkGrayColor, AAColor.lightGrayColor])//Colors theme
        .categoriesSet(@[
            @"January", @"February", @"March", @"April", @"May", @"June",
            @"July", @"August", @"September", @"October", @"November", @"December"
        ])
        .seriesSet(@[
            AASeriesElement.new
                .nameSet(@"Berlin Hot")
                .borderColorSet(AAColor.whiteColor)
                .borderWidthSet(@3)
                .borderRadiusSet(@10)
                .statesSet(AAStates.new
                    .hoverSet(AAHover.new
                        .colorSet(AAColor.redColor)))
                .dataSet(@[@7.0, @6.9, @9.5, @14.5, @18.2, @21.5, @25.2, @26.5, @23.3, @18.3, @13.9, @9.6]),
            
            AASeriesElement.new
                .nameSet(@"Beijing Hot")
                .borderColorSet(AAColor.whiteColor)
                .borderWidthSet(@3)
                .borderRadiusSet(@10)
                .statesSet(AAStates.new
                    .hoverSet(AAHover.new
                        .colorSet(@"dodgerblue")))// Dodgerblue／道奇藍／#1e90ff十六进制颜色代码
                .dataSet(@[@0.2, @0.8, @5.7, @11.3, @17.0, @22.0, @24.8, @24.1, @20.1, @14.1, @8.6, @2.5]),
        ]);
    
    AAOptions *aaOptions = aaChartModel.aa_toAAOptions;
    aaOptions.tooltip
        .formatterSet(@AAJSFunc(function () {
               return false;
        }));
    
    return aaOptions;
}

spikeroog · 2022-12-30T06:47:26Z

- (AAChartModel *)configureStackingColumnMixedLineChart {
    
    AAMarker *aaMarker = AAMarker.new
    .radiusSet(@1)//曲线连接点半径，默认是4
    .symbolSet(AAChartSymbolTypeCircle)//曲线点类型："circle", "square", "diamond", "triangle","triangle-down"，默认是"circle"
    .fillColorSet(AAColor.whiteColor)//点的填充色(用来设置折线连接点的填充色)
    .lineWidthSet(@0.5)//外沿线的宽度(用来设置折线连接点的轮廓描边的宽度)
    .lineColorSet(@"")//外沿线的颜色(用来设置折线连接点的轮廓描边颜色，当值为空字符串时，默认取数据点或数据列的颜色)
    ;
    AAStyle *yStyle = AAStyleColor(@"#666666");
    AAStyle *xStyle = AAStyleColor(@"#999999");
    AAStyle *dataStyle = AAStyleColor(@"#333333");

    AAChartModel *aaModel = AAChartModel.new
        .chartTypeSet(AAChartTypeColumn)
        .xAxisVisibleSet(NO)
        .titleSet(@"")
        .subtitleSet(@"")
        .colorsThemeSet(@[@"#EFF0F1", @"#333333"])//Colors theme

//        .colorsThemeSet(@[@"#EFF0F1"])//设置主题颜色数组
        .stackingSet(AAChartStackingTypeFalse)
        .categoriesSet(self.dateArr)//图表横轴的内容
    //    .yAxisTitleSet(@"里程/km")//设置图表 y 轴的单位
        .markerRadiusSet(@1)
        .yAxisLabelsStyleSet(yStyle)
        .xAxisLabelsStyleSet(xStyle)
        .dataLabelsStyleSet(dataStyle)
        .seriesSet(@[
            AASeriesElement.new
            .nameSet(@"里程")
            .lineWidthSet(@(kRl(11)))
            .dataSet(self.mileArr)
            .borderRadiusTopLeftSet((id)@"30%")
            .borderRadiusTopRightSet((id)@"30%")
//            .allowPointSelectSet(YES)
            .statesSet(AAStates.new
            .hoverSet(AAHover.new
            .colorSet(@"#333333")))
            
            ,

            AASeriesElement.new
            .typeSet(AAChartTypeLine)
            .lineWidthSet(@.5f)
            .nameSet(@"耗电")
            .colorByPointSet(@true)
            .markerSet(aaMarker)
            .dataSet(self.powArr)
            
    //        .dataLabelsSet(AADataLabels.new
    //                       .styleSet(AAStyleColorSizeWeight(AAColor.clearColor, 15, AAChartFontWeightTypeBold)))
            ,
        ]);
    return aaModel;
}

_aaChartModel = [self configureStackingColumnMixedLineChart];
    AAOptions *aaOptions = _aaChartModel.aa_toAAOptions;
    
    //默认选中的位置索引
    NSUInteger defaultSelectedIndex = 3;
    
    //https://api.highcharts.com/highcharts/chart.events.load
    //https://www.highcharts.com/forum/viewtopic.php?t=36508
    aaOptions.chart
        .eventsSet(AAChartEvents.new
                   .loadSet([NSString stringWithFormat:@AAJSFunc(function() {
                       const points = [];
                       const chart = this;
                       const series = chart.series;
                       const length = series.length;
                       
                       for (let i = 0; i < length; i++) {
                           const pointElement = series[i].data[%ld];
                           points.push(pointElement);
                       }
                       chart.xAxis[0].drawCrosshair(null, points[0]);
                       chart.tooltip.refresh(points);
                   }), defaultSelectedIndex]));
    
    
    [_aaChartView aa_drawChartWithOptions:aaOptions];
    
    [self setPPCount];
    
    self.oldMileage = self.model.totalMileage;

spikeroog · 2022-12-30T06:49:35Z

我现在成功实现了默认选中第3个柱状图，柱状图默认灰色、选中黑色的效果了。但是还有个问题，初次显示柱状图后默认选中第3个，这个时候我去点第4个柱状图，第3个柱状图没有恢复成灰色，反而依然是黑色的选中状态，请问这个要怎么处理呢

AAChartModel · 2022-12-30T07:30:02Z

参考:

https://www.highcharts.com/forum/viewtopic.php?t=42694

这个官方的示例, 我发现调用 point 的 select() 方法还是有点问题. 但是经过试验,我发现调用 point 的 onMouseOver() 方法则刚好.

参考:

https://api.highcharts.com/class-reference/Highcharts.Point#onMouseOver

AAChartModel · 2022-12-30T07:34:07Z

如下配置 AAOptions:

//https://github.com/AAChartModel/AAChartKit-Swift/issues/345
- (AAOptions *)setCrosshairAndTooltipToTheDefaultPositionAfterLoadingChart {
    AAChartModel *aaChartModel = AAChartModel.new
    .chartTypeSet(AAChartTypeColumn)//图表类型
    .colorsThemeSet(@[AAColor.lightGrayColor])
    .stackingSet(AAChartStackingTypeNormal)
    .yAxisVisibleSet(false)
    .markerRadiusSet(@0)
    .seriesSet(@[
        AASeriesElement.new
        .nameSet(@"Tokyo Hot")
        .lineWidthSet(@5.0)
        .fillOpacitySet(@0.4)
        .statesSet(AAStates.new
                          .hoverSet(AAHover.new
                              .colorSet(AAColor.redColor)))
        .dataSet(@[@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]),
    ]);
    
    AAOptions *aaOptions = aaChartModel.aa_toAAOptions;
    
    aaOptions.tooltip
        .styleSet(AAStyleColor(AAColor.whiteColor))
        .backgroundColorSet(@"#050505")
        .borderColorSet(@"#050505");
    
    aaOptions.xAxis
        .crosshairSet(AACrosshair.new
            .colorSet(AAColor.darkGrayColor)
            .dashStyleSet(AAChartLineDashStyleTypeLongDashDotDot)
            .widthSet(@2));
    
    //默认选中的位置索引
    NSUInteger defaultSelectedIndex = 5;
    
    //https://api.highcharts.com/highcharts/chart.events.load
    //https://www.highcharts.com/forum/viewtopic.php?t=36508
    aaOptions.chart
        .eventsSet(AAChartEvents.new
            .loadSet([NSString stringWithFormat:@AAJSFunc(function() {
                const points = [];
                const chart = this;
                const series = chart.series;
                const length = series.length;
                           
                for (let i = 0; i < length; i++) {
                    const pointElement = series[i].data[%ld];
                    pointElement.onMouseOver();
                    points.push(pointElement);
                }
                chart.xAxis[0].drawCrosshair(null, points[0]);
                chart.tooltip.refresh(points);
                       }), defaultSelectedIndex]));
    
    
    return aaOptions;
}

图表结果:

AAChartModel · 2022-12-30T07:34:47Z

也就是说, 在原来的 JS 的 for 循环中多加一句

                    pointElement.onMouseOver();

就可以了.

…LoadingChart sample

spikeroog · 2023-01-03T02:01:47Z

也就是说, 在原来的 JS 的 for 循环中多加一句
                    pointElement.onMouseOver();
就可以了.

OK，谢谢大佬，完美解决了

AAChartModel closed this as completed Dec 30, 2022

AAChartModel added the helpful label Dec 30, 2022

AAChartModel added a commit that referenced this issue Dec 30, 2022

Fix #1433 => Optimize setCrosshairAndTooltipToTheDefaultPositionAfter…

84900c4

…LoadingChart sample

AAChartModel mentioned this issue Jan 16, 2023

我点击新的圆柱体，默认选中的没有去除 AAChartModel/AAChartCore-Kotlin#156

Closed

AAChartModel mentioned this issue Apr 25, 2023

我需要让value显示在类似tooltip的气泡中，气泡样式可以设置本地图片，并且让气泡常驻，请问哪个类能实现该需求？ #1469

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

oc，柱状图如何实现默认选中某一项，且点击状态下的柱状图颜色标为黑色，其余未被点击的柱状图颜色为灰色 #1433

oc，柱状图如何实现默认选中某一项，且点击状态下的柱状图颜色标为黑色，其余未被点击的柱状图颜色为灰色 #1433

spikeroog commented Dec 28, 2022

AAChartModel commented Dec 30, 2022 •

edited

Loading

AAChartModel commented Dec 30, 2022 •

edited

Loading

spikeroog commented Dec 30, 2022 •

edited by AAChartModel

Loading

spikeroog commented Dec 30, 2022

AAChartModel commented Dec 30, 2022

AAChartModel commented Dec 30, 2022

AAChartModel commented Dec 30, 2022 •

edited

Loading

spikeroog commented Jan 3, 2023

oc，柱状图如何实现默认选中某一项，且点击状态下的柱状图颜色标为黑色，其余未被点击的柱状图颜色为灰色 #1433

oc，柱状图如何实现默认选中某一项，且点击状态下的柱状图颜色标为黑色，其余未被点击的柱状图颜色为灰色 #1433

Comments

spikeroog commented Dec 28, 2022

AAChartModel commented Dec 30, 2022 • edited Loading

AAChartModel commented Dec 30, 2022 • edited Loading

spikeroog commented Dec 30, 2022 • edited by AAChartModel Loading

spikeroog commented Dec 30, 2022

AAChartModel commented Dec 30, 2022

AAChartModel commented Dec 30, 2022

AAChartModel commented Dec 30, 2022 • edited Loading

spikeroog commented Jan 3, 2023

AAChartModel commented Dec 30, 2022 •

edited

Loading

AAChartModel commented Dec 30, 2022 •

edited

Loading

spikeroog commented Dec 30, 2022 •

edited by AAChartModel

Loading

AAChartModel commented Dec 30, 2022 •

edited

Loading