安装

• tns plugin add @nativescript-community/ui-chart

迁移到 2.x

在 2.x 中，大多数方法如 setColor/getColor 已更改为属性如 color。您可以手动进行更改并更新所有内容（您应该会收到有关已删除或重命名的方法的 tsc 错误），或者您可以使用正则表达式如 /set([A-Z])(\w*?)\(/ 来搜索和替换（替换中的第一个组应该是小写）。然后使用类型定义来修复潜在的名字更改。

使用方法

为了使手势工作，请确保在主应用程序文件（例如 app.ts）中添加以下代码块。

import { install } from '@nativescript-community/ui-chart';
install();

您还可以检查 Wiki 以获取任何有用的资料。

纯 NativeScript

重要： 请确保在页面元素上包含 xmlns:ch="@nativescript-community/ui-chart"。

XML

<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:ch="@nativescript-community/ui-chart">
    <ScrollView>
        <StackLayout>
            <Label text="Line Chart" fontSize="20"/>
            <ch:LineChart id="line-chart" backgroundColor="lightgray" width="300" height="350" loaded="onLineChartLoaded"/>
        </StackLayout>
    </ScrollView>
</Page>

TypeScript

import { LineChart } from '@nativescript-community/ui-chart/charts/LineChart';
import { LineDataSet } from '@nativescript-community/ui-chart/data/LineDataSet';
import { LineData } from '@nativescript-community/ui-chart/data/LineData';

export function onLineChartLoaded(args) {
    const chart = args.object as LineChart;

    chart.dragEnabled = true;
    chart.scaleEnabled = true;

    const data = new Array(500).fill(0).map((v, i) => ({
        index: i,
        value: Math.random() * 1,
    }));

    const sets = [];
    const set = new LineDataSet(data, 'Legend Label', 'index', 'value');
    set.color = 'blue';
    sets.push(set);

    // Create a data object with the data sets
    const ld = new LineData(sets);

    // Set data
    chart.data = ld;
}

NativeScript + Vue

Vue.registerElement('LineChart', () => require('@nativescript-community/ui-chart').LineChart);

<LineChart ref="chart" width="300" height="400" @loaded="onChartLoaded"> </LineChart>

import { LineChart } from '@nativescript-community/ui-chart/charts/LineChart';
import { LineDataSet } from '@nativescript-community/ui-chart/data/LineDataSet';
import { LineData } from '@nativescript-community/ui-chart/data/LineData';

onChartLoaded() {
    const chart = this.$refs.chart['nativeView'] as LineChart;
    chart.backgroundColor = 'white';

    chart.drawGridBackground = false;

    // enable scaling and dragging
    chart.dragEnabled = true;
    chart.scaleEnabled = true;

    // force pinch zoom along both axis
    chart.petPinchZoomEnabled = true;

    // disable dual axis (only use LEFT axis)
    chart.axisRight.enabled = false;

    const myData = new Array(500).fill(0).map((v, i) => ({
        index: i,
        value: Math.random() * 1,
    }));

    const sets = [];
    const set = new LineDataSet(myData, 'Legend Label', 'index', 'value');
    set.setColor('blue');
    sets.push(set);

    // Create a data object with the data sets
    const ld = new LineData(sets);

    // Set data
    chart.data = ld;
}

NativeScript + Angular

在 app.module.ts 中注册元素

registerElement('LineChart', () => require('@nativescript-community/ui-chart').LineChart);

<LineChart width="300" height="400" (loaded)="onChartLoaded($event)"> </LineChart>

import { LineChart } from '@nativescript-community/ui-chart/charts/LineChart';
import { LineDataSet } from '@nativescript-community/ui-chart/data/LineDataSet';
import { LineData } from '@nativescript-community/ui-chart/data/LineData';

onChartLoaded(args) {
    const chart = args.object as LineChart;
    chart.backgroundColor = 'white';

    chart.drawGridBackground = false;

    // enable scaling and dragging
    chart.dragEnabled = true;
    chart.scaleEnabled = true;

    // force pinch zoom along both axis
    chart.petPinchZoomEnabled = true;

    // disable dual axis (only use LEFT axis)
    chart.axisRight.enabled = false;

    const myData = new Array(500).fill(0).map((v, i) => ({
        index: i,
        value: Math.random() * 1,
    }));

    const sets = [];
    const set = new LineDataSet(myData, 'Legend Label', 'index', 'value');
    set.color = 'blue';
    sets.push(set);

    // Create a data object with the data sets
    const ld = new LineData(sets);

    // Set data
    chart.data = ld;
}

关于

此插件基于 MPAndroidChart，一个强大且易于使用的图表库。因此，特别感谢 MPAndroidChart 的创建者 Philipp Jahoda 及其团队。

与直接导入现有原生库不同，此库已用 TypeScript 重写，并以 @nativescript-community/ui-canvas 插件 API 为基础。'ui-canvas' 插件是一个非常强大的工具，它将 Android 原生 Canvas API 转换为适用于 NativeScript 框架的跨平台 API。简而言之，'ui-chart' 既有 Android 也有 iOS 的相同代码库。

此外，还使用了 @nativescript-community/gesturehandler 插件来处理图表手势。

简而言之，以下是重写库为 NativeScript 插件的好处

• Android 和 iOS 具有相同的代码库。这使得维护库变得非常容易。
• 应用程序大小更小，因为没有需要消耗空间的原生库或原生框架。所有这些都利用了 {N} 的力量。

最初，主要目标是防止需要序列化所有数据集。这是非常沉重、昂贵且不必要的！

运行示例后，可以得出结论，它是最快的绘图库，与 nativescript-ui-chart 和 nativescript-mpchart 相比。

这是因为

• 它不序列化或重新创建数据集的任何子集，而是直接使用提供的数组。
• 它可以在多个数据集之间共享相同的数据数组。
• 它仍然可以使用原生数组的强大功能，在绘制线条时，不序列化位置数组，使用 @nativescript-community/ui-canvas。

文档

NativeScript 'ui-chart' 插件基于 MPAndroidChart 库。简而言之，其 API 是相同的。将来将考虑添加 API 参考。