-
-
Notifications
You must be signed in to change notification settings - Fork 750
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
oc,柱状图如何实现默认选中某一项,且点击状态下的柱状图颜色标为黑色,其余未被点击的柱状图颜色为灰色 #1433
Labels
Comments
参考: 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个柱状图没有恢复成灰色,反而依然是黑色的选中状态,请问这个要怎么处理呢 |
参考: 这个官方的示例, 我发现调用 参考: |
如下配置 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;
} |
也就是说, 在原来的 pointElement.onMouseOver(); 就可以了. |
OK,谢谢大佬,完美解决了 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
oc,柱状图如何实现默认选中某一项,且点击状态下的柱状图颜色标为黑色,其余未被点击的柱状图颜色为灰色
The text was updated successfully, but these errors were encountered: