NativeScript MPChart UI

适用于 Android 和 iOS 的 NativeScript MPChart。此插件仍在开发中，未来将更新更多图表类型和功能。因为我没有太多时间，所以目前只有 demo-ng 是详细的，但它可以在核心中工作。现在，该插件具有简单的 LineChart。

基于

iOS 的 Charts

Android 的 MPAndroidChart

安装

运行 tns plugin add nativescript-mpchart

API

事件

实例属性

• showLegend - 布尔值
  显示或隐藏图表下的图例。默认为 false。
• showGridLines - 布尔值
  显示或隐藏图表中的网格线。默认为 false。
• scaleEnable - 布尔值
  启用或禁用图表中的缩放。默认为 false。
• descriptionText - 字符串
  获取或设置图表内的描述文本。默认为空。
• descriptionXOffset - 数字
  获取或设置描述文本从右侧的偏移量。默认为 0;
• descriptionYOffset - 数字
  获取或设置描述文本从底部的偏移量。默认为 0。
• descriptionTextColor - 颜色
  获取或设置描述文本的颜色。CSS 属性 'description-text-color'。
• highlightPerTapEnabled - 布尔值
  启用或禁用在行上点击时显示高亮。默认为 false。
• highlightPerDragEnabled - 颜色
  启用或禁用在行上拖动时显示高亮。默认为 false。
• xAxisGranularity - 数字
  获取或设置粒度（简单地说，这就像 yAxis 中的值的步长）。默认值是 1。
• yAxisGranularity - 数字
  获取或设置粒度（简单地说，这就像 yAxis 中的值的步长）。默认值是自动等分。
• xAxisLabelPosition - 字符串
  获取或设置图表中 xAxis 的位置。值："Top" | "Bottom" | "BothSided" | "TopInside" | "BottomInside"。默认值是 "Bottom"。
• xAxisLineColor, leftAxisLineColor, rightAxisLineColor - 颜色
  获取或设置轴颜色的线条颜色。CSS 属性 'x-axis-line-color', 'right-axis-line-color','left-axis-line-color'。
• xAxisTextColor, leftAxisTextColor, rightAxisTextColor - 颜色
  获取或设置轴颜色的文字颜色。CSS 属性 'x-axis-text-color', 'right-axis-text-color','left-axis-text-color'。
• xAxisMinValue, leftAxisMinValue, rightAxisMinValue - 数字
  获取或设置轴的最小值。
• xAxisMaxValue, leftAxisMaxValue, rightAxisMaxValue - 数字
  获取或设置轴的最大值。
• leftAxisFormatter, rightAxisFormatter - YAxisFormatterInterface
  获取或设置左右轴的格式化值。现在，该插件支持两种类型："Int" | "Float"。默认值不格式化，显示为输入值。详见示例。
• showValueLabels - 布尔值
  显示或隐藏值标签。
• showLeftAxis, showRightAxis - 布尔值
  显示或隐藏左侧或右侧轴。
• 字体 - 字符串 - 仅限iOS - 这是字体名称。获取或设置图表中所有文本的字体，例如图例文本、坐标轴标签文本、描述文本、线条文本中的值等。使用它需要添加应用目录下的fonts文件夹中的.ttf文件，例如font-name.ttf。
• 标记 - ChartMarkerConfig - 仅适用于柱状图。设置配置以在图表中选择点时显示标记。请参阅DEMO中的详细说明。使用标记：iOS：无需设置。Android：前往demo-ng，将default_marker_view.xml文件复制到App_Resources/Android/layout/default_marker_view.xml中。将其移动到您的项目中，路径可能类似。在添加

    <color name="marker_background">#cccccc</color>
    <color name="marker_text_color">#000000</color>
    <color name="text_view_color">#ff0000</color>

到App_Resources/Android/values/colors.xml中。请参阅demo-ng中的详细说明。

方法

• resetZoomLineChart() - 函数 -> void

此方法将重置图表。如果某些属性已更改但未在UI中应用，请调用它。

数据设置属性

• items - Array 设置要渲染图表的项目。这很重要。请参阅DEMO和demo-ng（app.component）中的更多内容。
• labels - Array 设置将在x轴中显示的值列表。默认情况下显示x值。属性将转换为要显示的值。这很重要。请参阅DEMO和demo-ng（app.component）中的更多内容。

接口

DataSetChartInterface {
    x: number;
    y: number;
}

DataSetLabelInterface {
    xAxisValue: number,
    label: string
}

DataLineChartInterface {
    dataSet: Array<DataSetChartInterface>;
    lineColor: Color;
    highlighColor?: Color;
    circleHoleEnabled?: boolean;
    circleColor?: Color;
    circleEnable?: boolean;
    legendLabel?: string;
}

YAxisFormatterInterface {
    type: TypeFormatter,
    numberOfDigits?: number
}
DataBarChartInterface {
    dataSet: Array<DataSetChartInterface>;
    legendLabel?: string;
    highlighColor?: Color,
    barColor?: Color;
}

ChartMarkerSize {
    width: number,
    height: number
}

ChartMarkerPadding {
    top: number;
    right: number;
    bottom: number;
    left: number;
}

ConfigDisplayData {
    showXValue: boolean,
    showYValue: boolean,
    fixedXValue?: YAxisFormatterInterface,
    fixedYValue?: YAxisFormatterInterface,
    formatter: string;
}

ChartMarkerConfig {
    backgroundColor?: Color,
    textColor?: Color,
    font?: string,
    fontSize?: number,
    padding?: {
        x: number,
        y: number
    },
    minimumSize?: ChartMarkerSize,
    borderRadius?: number,
    contentCenter?: boolean,
    displayData: ConfigDisplayData,
    xOffset?: number,
    yOffset?: number,
}

在Angular中的使用

• 在NgModule中导入NativeScriptMPLineChartModule

import { NativeScriptMPLineChartModule } from "nativescript-mpchart/angular";
//......
@NgModule({
	//......
	imports: [
        //......
		NativeScriptMPLineChartModule,
        //......
	],
    //......
})

• iOs：宽度和高度将自动填充父布局。
• Android：高度自动，因此您需要将其设置为

    height="100%"

以在父布局中填充。

<!-- app.component.html -->
    <!-- line chart -->
    <StackLayout height="500">
        <MPLineChart *ngIf="dataSet" #lineChart [showLegend]="setUp.showLegend" [showGridLines]="setUp.showGridLines" [scaleEnable]="setUp.scaleEnable"
            [descriptionText]="setUp.descriptionText" [descriptionXOffset]="setUp.descriptionXOffset" [descriptionYOffset]="setUp.descriptionYOffset"
            [descriptionTextColor]="setUp.descriptionTextColor" [highlightPerTapEnabled]="setUp.highlightPerTapEnabled" [highlightPerDragEnabled]="setUp.highlightPerDragEnabled"
            [xAxisGranularity]="setUp.xAxisGranularityProperty" [leftAxisGranularity]="setUp.leftAxisGranularityProperty" [rightAxisGranularity]="setUp.rightAxisGranularityProperty"
            [xAxisLineColor]="setUp.xAxisLineColor" [leftAxisLineColor]="setUp.leftAxisLineColor" [rightAxisLineColor]="setUp.rightAxisLineColor"
            [xAxisTextColor]="setUp.xAxisTextColor" [leftAxisTextColor]="setUp.leftAxisTextColor" [rightAxisTextColor]="setUp.rightAxisTextColor"
            [xAxisMinValue]="setUp.xAxisMinValue" [leftAxisMinValue]="setUp.leftAxisMinValue" [rightAxisMinValue]="setUp.rightAxisMinValue"
            [leftAxisMaxValue]="setUp.leftAxisMaxValue" [rightAxisMaxValue]="setUp.rightAxisMaxValue" [xAxisLabelPosition]="setUp.xAxisLabelPosition"
            [leftAxisFormatter]="leftAxisFormatter" [rightAxisFormatter]="rightAxisFormatter" [items]="dataSet" [labels]="labels"
            [font]="setUp.font" class="mp-chart"></MPLineChart>
    </StackLayout>
    <!-- bar chart -->
     <StackLayout height="500">
        <MPBarChart height="400" #lineChart *ngIf="barDataSet" [items]="barDataSet" [labels]="labels" [showLegend]="setUp.showLegend"
            [showGridLines]="setUp.showGridLines" [scaleEnable]="setUp.scaleEnable" [descriptionText]="setUp.descriptionText"
            [descriptionXOffset]="setUp.descriptionXOffset" [descriptionYOffset]="setUp.descriptionYOffset" [descriptionTextColor]="setUp.descriptionTextColor"
            [xAxisGranularity]="setUp.xAxisGranularityProperty" [leftAxisGranularity]="setUp.leftAxisGranularityProperty" [rightAxisGranularity]="setUp.rightAxisGranularityProperty"
            [xAxisLineColor]="setUp.xAxisLineColor" [leftAxisLineColor]="setUp.leftAxisLineColor" [rightAxisLineColor]="setUp.rightAxisLineColor"
            [xAxisTextColor]="setUp.xAxisTextColor" [leftAxisTextColor]="setUp.leftAxisTextColor" [rightAxisTextColor]="setUp.rightAxisTextColor"
            [xAxisMinValue]="setUp.xAxisMinValue" [leftAxisMinValue]="setUp.leftAxisMinValue" [rightAxisMinValue]="setUp.rightAxisMinValue"
            [leftAxisMaxValue]="setUp.leftAxisMaxValue" [rightAxisMaxValue]="setUp.rightAxisMaxValue" [xAxisLabelPosition]="setUp.xAxisLabelPosition"
            [leftAxisFormatter]="leftAxisFormatter" [rightAxisFormatter]="rightAxisFormatter" [font]="setUp.font" 
            [showValueLabels]="setUp.showValueLabels" [showLeftAxis]="setUp.showLeftAxis" [showRightAxis]="setUp.showRightAxis"
            [marker]="markerConfig" class="mp-chart"></MPBarChart>
    </StackLayout>

/*app.css*/
.mp-chart {
    description-text-color: #00ff00;
    x-axis-line-color: #ff0000;
    left-axis-line-color: #005500;
    right-axis-line-color: #ff00ff;
    x-axis-text-color: #ff0000;
    left-axis-text-color: #005500;
    right-axis-text-color: #ff00ff;
}

// app.component.ts
import { Component } from "@angular/core";
import { DataLineChartInterface, DataSetChartInterface, DataSetLabelInterface,YAxisFormatterInterface } from "nativescript-mpchart";

@Component({
    selector: "ns-app",
    templateUrl: "app.component.html",
})

export class AppComponent {

     public setUp: any = {
        showGridLines: false,
        showLegend: true,
        scaleEnable: true,
        descriptionText: "Text for chart",
        descriptionXOffset: 0,
        descriptionYOffset: 0,
        descriptionTextColor: "#ffff00",
        highlightPerTapEnabled: true,
        highlightPerDragEnabled: true,
        xAxisGranularityProperty: 1,
        leftAxisGranularityProperty: 20,
        rightAxisGranularityProperty: 30,
        xAxisLineColor: "#ff0000",
        xAxisTextColor: "#ff0000",

        leftAxisLineColor: "#0000ff",
        leftAxisTextColor: "#0000ff",

        rightAxisLineColor: "#00ff00",
        rightAxisTextColor: "#00ff00",

        xAxisMinValue: -1,
        xAxisMaxValue: 4,

        leftAxisMinValue: 0,
        leftAxisMaxValue: 100,

        rightAxisMinValue: 0,
        rightAxisMaxValue: 70,

        font: "Papyrus",
        xAxisLabelPosition: "Bottom",
        showValueLabels: false,
        showLeftAxis: true,
        showRightAxis: false,
    };
    public leftAxisFormatter: YAxisFormatterInterface = {
        type: "Float",
        numberOfDigits: 1
    };
    public rightAxisFormatter: YAxisFormatterInterface = {
        type: "Float",
        numberOfDigits: 1
    };
    public markerConfig: ChartMarkerConfig
    public dataSet: Array<DataLineChartInterface>;
    public barDataSet: Array<DataBarChartInterface>;
    public labels: Array<DataSetLabelInterface>;
    constructor(
        public changeDetectorRef: ChangeDetectorRef
    ) {
        let cyan = new Color("#00FFFF");
        let color = new Color("#FF0000");
        let color1 = new Color("#00FF00");
        let arrDataView1: Array<DataSetChartInterface> = [];
        let arrDataView2: Array<DataSetChartInterface> = [];
        let arrLabel: Array<DataSetLabelInterface> = [];
        let arrDataView: Array<DataSetChartInterface> = [];
        for (let i = 0; i < 8; i++) {
            arrDataView1.push({
                x: i,
                y: i * 9,
            });
            arrDataView2.push({
                x: i,
                y: i + 30,
            });

            arrLabel.push({
                xAxisValue: i,
                label: `Tháng ` + (i + 1)
            })

        }
        let item: DataLineChartInterface = {
            dataSet: arrDataView1,
            lineColor: cyan,
            highlighColor: color,
            legendLabel: "arrDataView1"
        };
        let item1: DataLineChartInterface = {
            dataSet: arrDataView2,
            lineColor: color1,
            highlighColor: color,
        };
        this.dataSet = [];
        this.dataSet.push(item);
        this.dataSet.push(item1);
        this.barDataSet = [];
        this.barDataSet.push({
            dataSet: arrDataView1,
            legendLabel: "barChartView1",
            highlighColor: color,
            barColor: color1
        });
        this.markerConfig = {
            displayData: {
                showXValue: false,
                showYValue: true,
                formatter: "Yvalue: {{y}}",
            },
            contentCenter: true,
            xOffset: -30,
            yOffset: -30,
            backgroundColor: new Color("#0000ff"),
            textColor: new Color("#ffffff"),
            font: "Papyrus",
            fontSize: 12,
            padding: {
                x: 20,
                y: 10
            }
        }
        this.labels = arrLabel;
    }
}

##修复相同错误

当使用插件并在文件*.component中导入接口时，如果在构建--aot时看到错误

模块未找到。无法解析 "相对路径" 中的 "nativescript-mpchart"。

您不能尝试将其更改为：import { ... } from "nativescript-mpchart/index" 并删除所有platform、hook、node_modules并重新构建。我认为这是一个平台错误，而不是插件错误，因为我是在开发过程中看到的。

示例

此存储库包含Angular和纯NativeScript示例。要运行这些示例，请在您的shell中执行以下操作

$ git clone https://github.com/LeCaoPhuc/nativescript-mpchart
$ cd nativescript-mpchart/src
$ npm install
$ npm run demo

这将运行iOS上的纯NativeScript示例项目。如果要在Android上运行它，请简单地使用.android扩展名而不是.ios后缀。

如果想要运行Angular示例，请使用demo.ios.ng。