Question

这是我的app.module.ts 我尝试使用ng2-charts

的教程

import { ChartsModule } from 'ng2-charts';
imports: [
 ChartsModule
],

这是我的html代码page.html，我从教程中复制并粘贴

< div >
 < div style = "display: block" >
  < canvas baseChart
    [datasets] = "barChartData"
    [labels] = "barChartLabels"
    [options] = "barChartOptions"
    [legend] = "barChartLegend"
    [chartType] = "barChartType"
    (chartHover) = "chartHovered($event)"
    (chartClick) = "chartClicked($event)" > 
   < /canvas>
 </ div >
 < button (click) = "randomize()" > Update < /button>
</ div >

这也是我的打字稿页面，也是我从教程中复制和粘贴的页面。 page.ts

public barChartOptions:any = {
scaleShowVerticalLines: false,
responsive: true};

public barChartLabels:string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
public barChartType:string = 'bar';
public barChartLegend:boolean = true;

public barChartData:any[] = [
    {data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'},
    {data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'}
  ];

  // events
public chartClicked(e:any):void {
    console.log(e);
  }

public chartHovered(e:any):void {
    console.log(e);
  }

public randomize():void {
    // Only Change 3 values
    let data = [
      Math.round(Math.random() * 100),
      59,
      80,
      (Math.random() * 100),
      56,
      (Math.random() * 100),
      40];
    let clone = JSON.parse(JSON.stringify(this.barChartData));
    clone[0].data = data;
    this.barChartData = clone;
  }

我尝试了所有教程和示例，但我不知道会发生什么。我得到这个错误。错误详细信息是：

**Error: Template parse errors:
Can't bind to 'datasets' since it isn't a known property of 'canvas'. ("
          <div style="display: block">
            <canvas baseChart
                    [ERROR ->][datasets]="barChartData"
                    [labels]="barChartLabels"
                    [options]"): ng:///StatsPageModule/StatsPage.html@33:20
Can't bind to 'labels' since it isn't a known property of 'canvas'. ("
            <canvas baseChart
                    [datasets]="barChartData"
                    [ERROR ->][labels]="barChartLabels"
                    [options]="barChartOptions"
                    [legend"): ng:///StatsPageModule/StatsPage.html@34:20
Can't bind to 'options' since it isn't a known property of 'canvas'. ("        [datasets]="barChartData"
                    [labels]="barChartLabels"
                    [ERROR ->][options]="barChartOptions"
                    [legend]="barChartLegend"
                    [chartT"): ng:///StatsPageModule/StatsPage.html@35:20
Can't bind to 'legend' since it isn't a known property of 'canvas'. ("      [labels]="barChartLabels"
                    [options]="barChartOptions"
                    [ERROR ->][legend]="barChartLegend"
                    [chartType]="barChartType"
                    (chartHo"): ng:///StatsPageModule/StatsPage.html@36:20
Can't bind to 'chartType' since it isn't a known property of 'canvas'. ("      [options]="barChartOptions"
                    [legend]="barChartLegend"
                    [ERROR ->][chartType]="barChartType"
                    (chartHover)="chartHovered($event)"
                  "): ng:///StatsPageModule/StatsPage.html@37:20**

我只想制作一张图表，说明一周内的用户数量和创建的帖子数量，但是我遵循的每个教程都会出错，所有这些都毫无例外，抱歉，如果您有英语，我的英语不是母语拼写错误。

Answer 1

使用Highcharts在Ionic App中设置图表

为离子产品安装Highcharts：

 npm install highcharts –save

打开文件 ./ src / pages / home / home.html 并用这样的div替换离子含量标签内的所有内容。

<div id="container" style="display: block;" ></div>

此div是用于保存图表的容器。我将代码写在 home.ts 文件中。 home.html 和 home.ts 是负责在应用程序中创建主页的文件。在顶部的home.ts中，首先导入 highcharts 模块。

import * as HighCharts from 'highcharts';

接下来，在构造函数之后的 Home 类中创建一个名为 ionViewDidLoad（） 的函数。该文件应如下所示：

import {
  Component
} from '@angular/core';
import {
  NavController
} from 'ionic-angular';
import * as HighCharts from 'highcharts';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {}

  ionViewDidLoad() {}
}

ionViewDidLoad 是一个特殊功能，该功能在View初始化并加载后执行；这样可以确保在视图中访问组件期间避免出现任何错误。在 ionViewDidLoad 中创建一个新的 HighCharts.chart 对象：

var myChart = HighCharts.chart('container', {
  chart: {
    type: 'bar'
  },
  title: {
    text: 'Fruit Consumption'
  },
  xAxis: {
    categories: ['Apples', 'Bananas', 'Oranges']
  },
  yAxis: {
    title: {
      text: 'Fruit eaten'
    }
  },
  series: [{
    name: 'Jane',
    data: [1, 0, 4]
  }, {
    name: 'John',
    data: [5, 7, 3]
  }]
});

保存文件，然后在终端中键入ionic serve –l以在实验室模式下在浏览器中运行该应用程序。该应用程序应如下所示：

Answer 2

这是Angular和ng2-charts版本之间的冲突使用Angular 7.2.0时，我卸载了ng2-charts并安装了ng2-charts@2.2.3

这有帮助。有关更多信息。看到： https://github.com/valor-software/ng2-charts/issues/1115

无法绑定到“数据集”，因为它不是“画布”的已知属性

2 个答案: