ChartJS 的 Obj-C 包装器。通过利用原生代码的强大功能,轻松构建动画图表。
使用非常简单。
将依赖项添加到您的 Podfile
platform :ios
pod 'TWRChart'
运行 pod install
以安装依赖项。
接下来,将头文件导入到任何想要使用自定义视图的位置
#import <TWRCharts/TWRChart.h>
TWRCharts 是另一个 iOS 图表库。TWRCharts 主要是将著名的 ChartJS JavaScript 库移植到原生 Obj-C 代码的努力;其优势在于它为开发者提供了在 TWRChartView 中加载 ChartJS JavaScript 文件(稍后会有更多介绍)或使用原生方法构建线条/柱状图或圆形(饼图/甜甜圈图)的灵活性。
虽然从 JavaScript 文件加载图表很容易,但配置和动态性有限,而通过使用原生扩展,用户可以动态地更新和刷新数据。
原生代码 API 还不支持 ChartJS 提供的所有类型的图表;目前只有线条、柱状图、饼图和甜甜圈图可用。
TWRCharts 的主要类是 TWRChartView,它是一个 UIWebView 的子类,由一个用户无需处理的 HTML 文件支持。API 已经设计得既从开发者角度,也从最终用户的角度来看,都像是一个完全本地的体验。
将 .js 文件放入您的 Xcode 项目中,并确保它已被添加到构建阶段捆绑到项目中的资源。
然后只需获取对文件的引用,并将其路径设置为控制器视图中添加的 TWRChartView。
NSString *jsFilePath = [[NSBundle mainBundle] pathForResource:@"file" ofType:@"js"];
[_chartView setChartJsFilePath:jsFilePath];
// Add the chart view to the controller's view
[self.view addSubview:_chartView];
您可以使用目前由 ChartJS 支持的任何图表类型。以下是一个加载极坐标图的示例。
var context = document.getElementById("canvas").getContext("2d");
var polarData = [
{
value : 30,
color: "#D97041"
},
{
value : 90,
color: "#C7604C"
},
{
value : 24,
color: "#21323D"
},
{
value : 58,
color: "#9D9B7F"
},
{
value : 82,
color: "#7D4F6D"
},
{
value : 8,
color: "#584A5E"
}
]
var polarArea = new Chart(context).PolarArea(polarData);
如果您计划使用 JS 文件来加载图表,请确保您的 .js 文件的第一行是以下内容
var context = document.getElementById("canvas").getContext("2d");
此代码从支持 TWRChartView 的 HTML 文件中检索正确的上下文。
根据您想绘制的图表类型(柱状图 / 折线图 / 饼图...),您需要实例化不同的对象,但主要需要遵循以下步骤
以下是一些示例代码
// Build chart data
TWRDataSet *dataSet1 = [[TWRDataSet alloc] initWithDataPoints:@[@10, @15, @5, @15, @5]];
TWRDataSet *dataSet2 = [[TWRDataSet alloc] initWithDataPoints:@[@5, @10, @5, @15, @10]];
NSArray *labels = @[@"A", @"B", @"C", @"D", @"E"];
TWRLineChart *line = [[TWRLineChart alloc] initWithLabels:labels
dataSets:@[dataSet1, dataSet2]
animated:NO];
// Load data
[_chartView loadLineChart:line];
TWRDataSet(表示柱状图和折线图的数据)可以通过以下 init 方法进行实例化
- (instancetype)initWithDataPoints:(NSArray *)dataPoints
fillColor:(UIColor *)fillColor
strokeColor:(UIColor *)strokeColor
pointColor:(UIColor *)pointColor
pointStrokeColor:(UIColor *)pointStrokeColor;
您可以自定义柱状图或折线图的填充和描边颜色。对于后者,您还可以选择点的填充和描边颜色。
至少您需要提供数据点,这是一个 NSNumbers 数组。
折线图和柱状图可以按以下方式进行实例化
- (instancetype)initWithLabels:(NSArray *)labels
dataSets:(NSArray *)dataSets
animated:(BOOL)animated;
当将图表对象传递给图表视图时,您需要根据您处理的对象类型,在您的 TWRChartView 实例上调用以下方法之一
- (void)loadBarChart:(TWRBarChart *)barChart;
- (void)loadLineChart:(TWRLineChart *)lineChart;
最后的小惊喜:您甚至可以选择使用完成处理程序调用上述方法,以便在图表动画结束后收到回调。您甚至猜不到下面有多少 JavaScript 代码在运行!
- (void)loadBarChart:(TWRBarChart *)barChart withCompletionHandler:(TWRAnimationCompletionBlock)block;
- (void)loadLineChart:(TWRLineChart *)lineChart withCompletionHandler:(TWRAnimationCompletionBlock)block;
最后,圆形图可以用以下方法进行实例化
- (instancetype)initWithValues:(NSArray *)values
colors:(NSArray *)colors
type:(TWRCircularChartType)type
animated:(BOOL)animated;
您甚至有机会选择图表类型,要么是一个饼图(TWRCircularChartTypePie),要么是一个甜甜圈(TWRCircularChartTypeDoughnut)。
同样,一旦您有了图表对象,您就可以使用以下两种方法之一,在您的 TWRChartView 实例上调用,将其添加到图表视图中
- (void)loadCircularChart:(TWRCircularChart *)circularChart;
- (void)loadCircularChart:(TWRCircularChart *)circularChart withCompletionHandler:(TWRAnimationCompletionBlock)block;
TWRCharts
需要 iOS 6.x 或更高版本。
使用遵循 MIT 许可证。有关详细信息,请参阅 LICENSE。