Nativescript 图表插件

独立插件，不是 Telerik UI 的一部分

Android 使用 https://github.com/PhilJay/MPAndroidChart

iOS 尚未实现

插件目前包含折线图类型

折线类型

添加命名空间 xmlns:LineChart="nativescript-charts/line-chart"

chartSettings 是 ILineChart 类型，chartData 是 ILineSeries 类型。每个点都是一个 {x,y} 对象。它们都可以从 nativescript-charts/line-chart 中导入。

LineChart 示例

var points  = [
    {x:1,y:4},
    {x:3,y:5.9},
    {x:7,y:4},
    {x:8,y:10},
    {x:10,y:1}
];

var lineData:ILineSeries = {
    lineData: points,
    color:"green",
    name:"test",  
};

var linechartOpts:ILineChart= <ILineChart>{
    Legend:{
        enabled:false,
        form:LegendForm.CIRCLE,
    },
    XAxis:{
        textSize:12,
        textColor:"green",
        position:XPosition.TOP,
        axisMinimum:-30,
        axisMaximum:30,
        drawGridLines:false,
        showOnlyMinMax:false,
        enabled:true
    },
    RightYAxis:{
        textSize:10,
        textColor:"green",
        position:YPosition.OUTSIDE_CHART,
        axisMaximum:120,
        axisMinimum:-10,
        showOnlyMinMax:false,
        drawGridLines:false,
        enabled:true
    },
    LeftYAxis:{
        textSize:10,
        textColor:"green",
        position:YPosition.OUTSIDE_CHART,
        axisMaximum:120,
        axisMinimum:-10,
        showOnlyMinMax:false,
        drawGridLines:false,
        enabled:true
    },
    BaseSettings:{
        enabledDescription:false,
        drawGridBackground:false,
    }
};

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded" 
    xmlns:LineChart="nativescript-charts/line-chart">
    <LineChart:LineChart  chartSettings="{{chartSettings}}" chartData="{{chartData}}"/>
</Page>