TWRCharts 0.1

TWRCharts 0.1

测试已测试
语言语言 JavaScriptJavaScript
许可 MIT
发布最新发布2014年12月

Michelangelo Chasseur 维护。



TWRCharts

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 文件加载图表

将 .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 文件中检索正确的上下文。

使用原生 Obj-C 代码加载图表

根据您想绘制的图表类型(柱状图 / 折线图 / 饼图...),您需要实例化不同的对象,但主要需要遵循以下步骤

  • 实例化数据对象;
  • 通过传递包含标签的数据对象来实例化图表对象;
  • 将图表对象加载到图表视图中。

以下是一些示例代码

// 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。