商城
作者 NativeScript.org
nativeScript-mpchart-fork-adrianoop
由 adrianoop 编写 | v1.0.8
NativeScript MPChart Fork AdrianoOP
npm i --save nativescript-mpchart-fork-adrianoop

从 LeCaoPhuc 复制，对 Android 进行了一些小的改进... 文档尚未更新

NativeScript MPChart UI

为 Android 和 iOS 优化的 NativeScript MPChart。此插件仍在开发中，未来将更新更多图表类型和功能。由于时间有限，目前只有 demo-ng 是详细的，但它可以在核心中运行。现在，该插件具有简单的 LineChart 和 BarChart。

基于

Charts for iOS

MPAndroidChart for Android

安装

运行 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 - 字符串
    获取或设置图表中 x 轴的位置。值："顶部" | "底部" | "两侧" | "顶部内部" | "底部内部"。默认值是 "底部"。
  • 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"。默认值不格式化，显示为输入。详细信息请见 DEMO。
  • showValueLabels - 布尔值
    显示或隐藏值标签。
  • showLeftAxis, showRightAxis - 布尔值
    显示或隐藏左侧或右侧轴。
  • 字体 - 字符串 - 仅iOS - 这是字体名称。获取或设置图表中所有文本的字体，例如图例文本、坐标轴标签文本、描述文本、折线文本中的值等。要使用它，您需要从app/fonts/font-name.ttf添加文件.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;
    }
}

##FixSameError

当使用插件时，如果在文件.component中导入接口的行时构建 --aot出现错误

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

您无法尝试将其更改为：从 "nativescript-mpchart/index" 导入 {...} 并删除所有platform、hook、node_modules并重新构建。我认为这是一个平台和angular的错误，而不是插件错误，因为我是在开发时看到的。

演示

此存储库包含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。