如何在表格视图单元格中实现 iOS 图表？

Question

我正在使用 iOS 图表 (https://github.com/danielgindi/ios-charts)，它在普通视图控制器中运行良好。但是，我想在一个表视图单元格中实现这些图表，其中数据源会因单元格而异。此外，显示此图表的视图的出口位于我的单元格子类中。我如何实现此代码（它在非重复视图控制器中工作）以显示在我的单元格子类的视图中？提前致谢！！

class ChartViewController: UIViewController {

   @IBOutlet weak var lineChartView: LineChartView!

      override func viewDidLoad() {
         super.viewDidLoad()

         let candidates = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
         let ratings = [33.0, 20.0, 13.0, 9.0, 8.0, 6.0]

         setChart(candidates, values: ratings)
      }

      func setChart(dataPoints: [String], values: [Double]) {

         var dataEntries: [ChartDataEntry] = []

         for i in 0..<dataPoints.count {

            let dataEntry = ChartDataEntry(value: values[i], xIndex: i)

            dataEntries.append(dataEntry)
         }

         let lineChartDataSet = LineChartDataSet(yVals: dataEntries, label: "Rating")
         let lineChartData = LineChartData(xVals: dataPoints, dataSet: lineChartDataSet)
         lineChartView.data = lineChartData
         lineChartView.animate(xAxisDuration: 2.0)
      } 
}

Answer 1

您可以为 table 视图单元格子设置单元格视图class，这样您就可以通过将视图控制器中的所有内容复制到原型中来在故事板中使用 LineChartView table 查看单元格。

记得在情节提要的身份检查器中设置自定义单元格的 class。

添加一些属性来保存图表的参数。这些可以在您调出 cellForRowAtIndexPath:.

中的单元格时设置

例如：

class MyTableViewCell: UITableViewCell {
    @IBOutlet weak var lineChartView: LineChartView!
    var candidates: Array<String>?
    var ratings: Array<Float>?

调出单元格时，可以设置属性：

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {        
    let cell = tableView.dequeueReusableCellWithIdentifier(“chartCell”, forIndexPath: indexPath)
    candidates = someCandidatesArrayForIndexPath(indexPath)
    ratings = someRatingsArrayForIndexPath(indexPath)
    cell.setChart()
    return cell
}

因此，当您 return 单元格时，它会将属性设置为根据其索引路径显示不同的视图。我在示例中使用的函数 someCandidatesArrayForIndexPath( ) 和 someRatingsArrayForIndexPath( ) 获取需要显示的值。你将不得不编写这些函数。

Answer 2

Objective-C

子类UITableViewCell

@interface ChartTVCell : UITableViewCell <ChartViewDelegate>
@property (nonatomic, strong) IBOutlet CombinedChartView *chartView;
@end

在 tableView:cellForRowAtIndexPath:

中配置您的图表

divChartData 是 CombinedChartData

的实例变量

else if (indexPath.section == 2) {
    ChartTVCell *cell = [tableView dequeueReusableCellWithIdentifier:@"chartCell" forIndexPath:indexPath];

    cell.chartView.data = divChartData; // <-- this is where your chart data is located. 
    cell.chartView.noDataText = divChartText;
    cell.chartView.tag = 101;

    cell.chartView.delegate = self;
    ...
    // blah blah blah, set up your charts
    ...
    cell.chartView.xAxis.spaceBetweenLabels = 2.0;

    return cell;
}

获取数据

我从网络服务调用中获取我的数据，varData 是 NSMutableArray 我的数据

// Create the necessary arrays
NSMutableArray<BarChartDataEntry *> *cyValues = [NSMutableArray array], *lyValues = [NSMutableArray array];
NSMutableArray<NSString *> *dates = [NSMutableArray array];
NSMutableArray<UIColor *> *divColors = [NSMutableArray array];

// Loop through your data, populating your charts datasource, colors, ect...
for (int i = 0; i < varData.count; i++) {
    [dates addObject:[CR convertDate:[varData[i]HOUR] inputFormat:@"H" outputFormat:@"h a"]];
    [cyValues addObject:[[BarChartDataEntry alloc] initWithValue:[[varData[i]CYSALES] floatValue] xIndex:i]];
    [lyValues addObject:[[BarChartDataEntry alloc] initWithValue:[[varData[i]LYSALES] floatValue] xIndex:i]];
    [divColors addObject:[UIColor getColorForHourlyChartData:[[varData[i]CYSALES] floatValue] andValue2:[[varData[i]LYSALES] floatValue]]];
}

// init your charts dataSource with the values from above
divChartData = [[CombinedChartData alloc] initWithXVals:dates];
divChartData.barData = [self setupBarChartWithValues:lyValues withLabel:@"Last Year" withColor:[UIColor chartLY] withColorArray:nil];
divChartData.lineData = [self setupLineChartWithValues:cyValues withLabel:@"Current Year" withColor:[UIColor chartCY] withColorArray:divColors];

// Reload tableView
[self.tableView reloadData];

注意：我更喜欢使用 Combined 图表，因为它能够从折线图变为条形图，从散点图变为饼图，再回到折线图，而无需进行太多更改（即：您不能添加 barChart 到 lineChartView)

如何在表格视图单元格中实现 iOS 图表？

How to implement iOS Chart in a tableview cell?

ios

swift

ios-charts

Objective-C