iOS-Charts - 制作一个条形图和字段 remaning 与其他颜色
iOS-Charts - Make a bar chart and field remaning with other color
我正在尝试完全按照设计师的指导方针制作图表，但我在其中 3 件事上有困难。
这是指南：
这就是我所做的：
如您所见，红条应该在自己和目标之间有一条蓝条。
已经尝试创建第二个栏以查看是否留在后面但是没有用。这是我试过的
BarChartDataSet *set2 = [[BarChartDataSet alloc] initWithYVals:yVals label:@""];
然后用带有目标高度的蓝条归档。但是不起作用，所以我删除了它。
另一个问题是它从零开始的左轴标签，并且找到了解决方法。
第三个也是最后一个问题是目标的 T 停留在该线之上，而预期的是在该线之后。
这是用来获取图表的代码：
/*
* Method to render the graphic of a given KPI
*
* @param chartView BarChartView object type
* @param array NSMutableArray with array of dictionaries
* @param target double with target value
* @param granularity NSString ("Monthly", "weekly" or "daily")
*
* @return id BarCartView
*/
- (id)graphicRenderIn:(BarChartView*)chartView
withData:(NSMutableArray*)array
target:(double) target
andGranularity:(NSString*)granularity{
_chartView = chartView;
[_chartView setUserInteractionEnabled:NO];
// chartView setup
_chartView.delegate = self;
_chartView.descriptionText = @"";
_chartView.noDataTextDescription = @"You need to provide data for the chart.";
_chartView.maxVisibleValueCount = 60;
_chartView.pinchZoomEnabled = NO;
_chartView.drawBarShadowEnabled = NO;
_chartView.drawGridBackgroundEnabled = NO;
_chartView.backgroundColor = [UIColor green_title];
// Ox axis setup
ChartXAxis *xAxis = _chartView.xAxis;
xAxis.labelPosition = XAxisLabelPositionBottom;
xAxis.spaceBetweenLabels = 0.0;
xAxis.drawGridLinesEnabled = NO;
xAxis.axisLineColor = [UIColor turqoise];
xAxis.labelTextColor = [UIColor white_100];
xAxis.labelFont = [UIFont Caption1];
_chartView.leftAxis.drawGridLinesEnabled = NO;
_chartView.rightAxis.drawGridLinesEnabled = NO;
_chartView.rightAxis.enabled = NO;
_chartView.legend.enabled = NO;
// Oy axis setup
ChartYAxis *leftAxis = _chartView.leftAxis;
leftAxis.labelFont = [UIFont Caption1];
leftAxis.labelTextColor = [UIColor white_100];
leftAxis.labelCount = 3;
leftAxis.labelPosition = YAxisLabelPositionInsideChart;
leftAxis.spaceTop = 0.15;
leftAxis.axisLineColor = [UIColor turqoise];
// define TARGET line in graphic
[leftAxis removeAllLimitLines];
[self updateTargetLine:target];
[leftAxis addLimitLine:_line];
// set data values
[self setDataCount:array target:target andGranularity:granularity];
[_chartView animateWithYAxisDuration:2.5];
return self;
}
/*
* Method to setup the horizontal target line
*
* @param target double with target value
*
* @return void
*/
- (void) updateTargetLine:(double) target
{
// single target line
if (_line == nil)
{
ChartLimitLine *targetLine = [[ChartLimitLine alloc] initWithLimit:target label:@""];
_line = targetLine;
}
// target line setup
if (target != 0 )
{
_line.label = @"T";
}
_line.lineWidth = 0.8;
_line.lineColor = [UIColor app_blue];
_line.labelPosition = ChartLimitLabelPositionRight;
_line.valueFont = [UIFont systemFontOfSize:10.0];
}
/*
* Method to setup data for the BarChart graphic
*
* @param array NSMutableArray with array of dictionaries
* @param target double with target value
* @param granularity NSString ("Monthly", "weekly" or "daily")
*
* @return void
*/
- (void)setDataCount:(NSMutableArray*)array target:(double)target andGranularity:(NSString *)granularity
{
NSInteger arraySize = [array count];
NSMutableArray *arrayOy = [[NSMutableArray alloc] initWithCapacity:0];
NSMutableArray *arrayOx = [[NSMutableArray alloc] initWithCapacity:0];
// get array of values(arrayOy) and keys(arrayOx) from
for (NSDictionary *elem in array) {
[arrayOy addObject: [elem objectForKey:@"value" ]];
[arrayOx addObject:[elem objectForKey:@"date"]];
}
NSMutableArray *yVals = [[NSMutableArray alloc] init];
NSMutableArray *arrColor = [[NSMutableArray alloc] init];
for(int i = 0; i < arraySize; i++)
{
double val = [[arrayOy objectAtIndex:i]doubleValue];
[yVals addObject:[[BarChartDataEntry alloc] initWithValue:val xIndex:i+1]];
if (val < target ) {
[arrColor addObject:[UIColor red_bar]];
}else{
[arrColor addObject:[UIColor green_bar]];
}
}
// Ox label values depends on granularity
NSMutableArray *xVals = [[NSMutableArray alloc] init];
[xVals addObject:@""]; // empty value to creat padding from the end
for (int i = 0; i < arraySize; i++)
{
// Formatting Ox axis labels concerning data and granularity
NSDate* date = [NSDate dateWithTimeIntervalSince1970:[[arrayOx objectAtIndex:i] doubleValue]];
NSDateFormatter *formatter = [[NSDateFormatter alloc] init];
if ([granularity isEqualToString:@"dayly"] ) {
[formatter setDateFormat:@"HH:mm"];
}else{
[formatter setDateFormat:@"dd/MM"];
}
[xVals addObject:[formatter stringFromDate:date]];
}
[xVals addObject:@""]; // empty value to creat padding from the end
BarChartDataSet *set1 = [[BarChartDataSet alloc] initWithYVals:yVals label:@""];
[set1 setColors:(arrColor)];
[set1 setBarSpace: 0.90]; // creat a space between of each bar 90%
set1.drawValuesEnabled = NO;
NSMutableArray *dataSets = [[NSMutableArray alloc] init];
[dataSets addObject:set1];
BarChartData *data = [[BarChartData alloc] initWithXVals:xVals dataSets:dataSets];
_chartView.data = data;
}
您的 ios-charts 版本是多少？我想当您突出显示红色条时，蓝色条就在那里？最新版本只有高亮显示才可以解决
对于 Q2，每个 yAxis 都有一个名为 startAtZeroEnabled 的 属性。随心所欲
对于Q3，在最新的代码中，限制线标签有更多的位置选项。另一种方法是您可以尝试在 yAxis 渲染器的 renderLimitLine 函数中写入您自己的位置
这是我用于图表的内容。你的回答对我帮助很大！
func setChart(dataPoints: [String], values: [Double]) {
barChartView.noDataText = "You need to provide data for the chart"
var dataEntries: [BarChartDataEntry] = []
for i in 0..<dataPoints.count {
let dataEntry = BarChartDataEntry(value: values[i], xIndex: i)
dataEntries.append(dataEntry)
}
let chartDataSet = BarChartDataSet(yVals: dataEntries, label: "")
let chartData = BarChartData(xVals: months, dataSet: chartDataSet)
barChartView.data = chartData
barChartView.descriptionText = ""
chartDataSet.colors = [UIColor(red: 1, green: 1, blue: 1, alpha: 1)]
barChartView.xAxis.drawGridLinesEnabled = false
barChartView.xAxis.drawLabelsEnabled = false
barChartView.xAxis.labelWidth = 3
barChartView.xAxis.axisLineWidth = 1
barChartView.xAxis.labelTextColor = UIColor.whiteColor()
barChartView.xAxis.axisLineColor = UIColor.whiteColor()
barChartView.xAxis.labelPosition = .Bottom
barChartView.rightAxis.enabled = false
//barChartView.xAxis.labelTextColor = UIColor.whiteColor()
barChartView.drawBarShadowEnabled = false
barChartView.leftAxis.drawGridLinesEnabled = false
barChartView.leftAxis.enabled = true
barChartView.leftAxis.axisLineColor = UIColor.whiteColor()
barChartView.leftAxis.labelTextColor = UIColor.whiteColor()
barChartView.leftAxis.labelCount = 4
barChartView.leftAxis.axisLineWidth = 1
barChartView.legend.enabled = false
//barChartView.borderLineWidth
}
这是我得到的：https://www.dropbox.com/s/uskvwcbq3mlaf9o/Screen%20Shot%202016-04-25%20at%2017.14.36.png?dl=0
我正在尝试完全按照设计师的指导方针制作图表，但我在其中 3 件事上有困难。
这是指南：
这就是我所做的：
如您所见，红条应该在自己和目标之间有一条蓝条。 已经尝试创建第二个栏以查看是否留在后面但是没有用。这是我试过的
BarChartDataSet *set2 = [[BarChartDataSet alloc] initWithYVals:yVals label:@""];
然后用带有目标高度的蓝条归档。但是不起作用，所以我删除了它。
另一个问题是它从零开始的左轴标签，并且找到了解决方法。
第三个也是最后一个问题是目标的 T 停留在该线之上，而预期的是在该线之后。
这是用来获取图表的代码：
/*
* Method to render the graphic of a given KPI
*
* @param chartView BarChartView object type
* @param array NSMutableArray with array of dictionaries
* @param target double with target value
* @param granularity NSString ("Monthly", "weekly" or "daily")
*
* @return id BarCartView
*/
- (id)graphicRenderIn:(BarChartView*)chartView
withData:(NSMutableArray*)array
target:(double) target
andGranularity:(NSString*)granularity{
_chartView = chartView;
[_chartView setUserInteractionEnabled:NO];
// chartView setup
_chartView.delegate = self;
_chartView.descriptionText = @"";
_chartView.noDataTextDescription = @"You need to provide data for the chart.";
_chartView.maxVisibleValueCount = 60;
_chartView.pinchZoomEnabled = NO;
_chartView.drawBarShadowEnabled = NO;
_chartView.drawGridBackgroundEnabled = NO;
_chartView.backgroundColor = [UIColor green_title];
// Ox axis setup
ChartXAxis *xAxis = _chartView.xAxis;
xAxis.labelPosition = XAxisLabelPositionBottom;
xAxis.spaceBetweenLabels = 0.0;
xAxis.drawGridLinesEnabled = NO;
xAxis.axisLineColor = [UIColor turqoise];
xAxis.labelTextColor = [UIColor white_100];
xAxis.labelFont = [UIFont Caption1];
_chartView.leftAxis.drawGridLinesEnabled = NO;
_chartView.rightAxis.drawGridLinesEnabled = NO;
_chartView.rightAxis.enabled = NO;
_chartView.legend.enabled = NO;
// Oy axis setup
ChartYAxis *leftAxis = _chartView.leftAxis;
leftAxis.labelFont = [UIFont Caption1];
leftAxis.labelTextColor = [UIColor white_100];
leftAxis.labelCount = 3;
leftAxis.labelPosition = YAxisLabelPositionInsideChart;
leftAxis.spaceTop = 0.15;
leftAxis.axisLineColor = [UIColor turqoise];
// define TARGET line in graphic
[leftAxis removeAllLimitLines];
[self updateTargetLine:target];
[leftAxis addLimitLine:_line];
// set data values
[self setDataCount:array target:target andGranularity:granularity];
[_chartView animateWithYAxisDuration:2.5];
return self;
}
/*
* Method to setup the horizontal target line
*
* @param target double with target value
*
* @return void
*/
- (void) updateTargetLine:(double) target
{
// single target line
if (_line == nil)
{
ChartLimitLine *targetLine = [[ChartLimitLine alloc] initWithLimit:target label:@""];
_line = targetLine;
}
// target line setup
if (target != 0 )
{
_line.label = @"T";
}
_line.lineWidth = 0.8;
_line.lineColor = [UIColor app_blue];
_line.labelPosition = ChartLimitLabelPositionRight;
_line.valueFont = [UIFont systemFontOfSize:10.0];
}
/*
* Method to setup data for the BarChart graphic
*
* @param array NSMutableArray with array of dictionaries
* @param target double with target value
* @param granularity NSString ("Monthly", "weekly" or "daily")
*
* @return void
*/
- (void)setDataCount:(NSMutableArray*)array target:(double)target andGranularity:(NSString *)granularity
{
NSInteger arraySize = [array count];
NSMutableArray *arrayOy = [[NSMutableArray alloc] initWithCapacity:0];
NSMutableArray *arrayOx = [[NSMutableArray alloc] initWithCapacity:0];
// get array of values(arrayOy) and keys(arrayOx) from
for (NSDictionary *elem in array) {
[arrayOy addObject: [elem objectForKey:@"value" ]];
[arrayOx addObject:[elem objectForKey:@"date"]];
}
NSMutableArray *yVals = [[NSMutableArray alloc] init];
NSMutableArray *arrColor = [[NSMutableArray alloc] init];
for(int i = 0; i < arraySize; i++)
{
double val = [[arrayOy objectAtIndex:i]doubleValue];
[yVals addObject:[[BarChartDataEntry alloc] initWithValue:val xIndex:i+1]];
if (val < target ) {
[arrColor addObject:[UIColor red_bar]];
}else{
[arrColor addObject:[UIColor green_bar]];
}
}
// Ox label values depends on granularity
NSMutableArray *xVals = [[NSMutableArray alloc] init];
[xVals addObject:@""]; // empty value to creat padding from the end
for (int i = 0; i < arraySize; i++)
{
// Formatting Ox axis labels concerning data and granularity
NSDate* date = [NSDate dateWithTimeIntervalSince1970:[[arrayOx objectAtIndex:i] doubleValue]];
NSDateFormatter *formatter = [[NSDateFormatter alloc] init];
if ([granularity isEqualToString:@"dayly"] ) {
[formatter setDateFormat:@"HH:mm"];
}else{
[formatter setDateFormat:@"dd/MM"];
}
[xVals addObject:[formatter stringFromDate:date]];
}
[xVals addObject:@""]; // empty value to creat padding from the end
BarChartDataSet *set1 = [[BarChartDataSet alloc] initWithYVals:yVals label:@""];
[set1 setColors:(arrColor)];
[set1 setBarSpace: 0.90]; // creat a space between of each bar 90%
set1.drawValuesEnabled = NO;
NSMutableArray *dataSets = [[NSMutableArray alloc] init];
[dataSets addObject:set1];
BarChartData *data = [[BarChartData alloc] initWithXVals:xVals dataSets:dataSets];
_chartView.data = data;
}
您的 ios-charts 版本是多少？我想当您突出显示红色条时，蓝色条就在那里？最新版本只有高亮显示才可以解决
对于 Q2，每个 yAxis 都有一个名为 startAtZeroEnabled 的 属性。随心所欲
对于Q3，在最新的代码中，限制线标签有更多的位置选项。另一种方法是您可以尝试在 yAxis 渲染器的 renderLimitLine 函数中写入您自己的位置
这是我用于图表的内容。你的回答对我帮助很大！
func setChart(dataPoints: [String], values: [Double]) {
barChartView.noDataText = "You need to provide data for the chart"
var dataEntries: [BarChartDataEntry] = []
for i in 0..<dataPoints.count {
let dataEntry = BarChartDataEntry(value: values[i], xIndex: i)
dataEntries.append(dataEntry)
}
let chartDataSet = BarChartDataSet(yVals: dataEntries, label: "")
let chartData = BarChartData(xVals: months, dataSet: chartDataSet)
barChartView.data = chartData
barChartView.descriptionText = ""
chartDataSet.colors = [UIColor(red: 1, green: 1, blue: 1, alpha: 1)]
barChartView.xAxis.drawGridLinesEnabled = false
barChartView.xAxis.drawLabelsEnabled = false
barChartView.xAxis.labelWidth = 3
barChartView.xAxis.axisLineWidth = 1
barChartView.xAxis.labelTextColor = UIColor.whiteColor()
barChartView.xAxis.axisLineColor = UIColor.whiteColor()
barChartView.xAxis.labelPosition = .Bottom
barChartView.rightAxis.enabled = false
//barChartView.xAxis.labelTextColor = UIColor.whiteColor()
barChartView.drawBarShadowEnabled = false
barChartView.leftAxis.drawGridLinesEnabled = false
barChartView.leftAxis.enabled = true
barChartView.leftAxis.axisLineColor = UIColor.whiteColor()
barChartView.leftAxis.labelTextColor = UIColor.whiteColor()
barChartView.leftAxis.labelCount = 4
barChartView.leftAxis.axisLineWidth = 1
barChartView.legend.enabled = false
//barChartView.borderLineWidth
}
这是我得到的：https://www.dropbox.com/s/uskvwcbq3mlaf9o/Screen%20Shot%202016-04-25%20at%2017.14.36.png?dl=0
