Closed spikeroog closed 1 year ago
oc,柱状图如何实现默认选中某一项
参考:
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;
}
且点击状态下的柱状图颜色标为黑色,其余未被点击的柱状图颜色为灰色
参考:
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;
}
- (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;
我现在成功实现了默认选中第3个柱状图,柱状图默认灰色、选中黑色的效果了。但是还有个问题,初次显示柱状图后默认选中第3个,这个时候我去点第4个柱状图,第3个柱状图没有恢复成灰色,反而依然是黑色的选中状态,请问这个要怎么处理呢
参考:
这个官方的示例, 我发现调用 point
的 select()
方法还是有点问题. 但是经过试验,我发现调用 point
的 onMouseOver()
方法则刚好.
参考:
如下配置 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;
}
图表结果:
也就是说, 在原来的 JS
的 for
循环中多加一句
pointElement.onMouseOver();
就可以了.
也就是说, 在原来的
JS
的for
循环中多加一句pointElement.onMouseOver();
就可以了.
OK,谢谢大佬,完美解决了
oc,柱状图如何实现默认选中某一项,且点击状态下的柱状图颜色标为黑色,其余未被点击的柱状图颜色为灰色