Ionic2中的ChartJS2 [英] ChartJS2 in Ionic2

问题描述

我创建了一个新项目，并尝试使用ChartJS2 通过此链接

app.module.ts

...
import { ChartModule } from 'ng2-chartjs2';

@NgModule({
  ...
  imports: [
    ChartModule
  ],
  ...
})
export class AppModule {}

index.html

<script src="../node_modules/chart.js/src/chart.js"></script>
<!--<script src="node_modules/chart.js/src/chart.js"></script>-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>-->

<!-- Tried all three  -->

home.ts

...    
import { Chart } from 'ng2-chartjs2';
...
export class HomePage {

  ...
  labels: string[] = ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"];
  data: Chart.Dataset[] = [
    {
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
    borderWidth: 1
     } 
  ];
}

我遇到错误

chart.js:21您必须在index.html中包括Chart.js 2.0库 为了使ng2-chartjs2正常工作.

Github存储库-这是我的完整程序，出现此错误

任何帮助将不胜感激.谢谢.

解决方案

尝试一下

在您的 src/assets 内部添加一个名为 libs 的文件夹，然后复制 node_modules/chart.js/dist/Chart.bundle.js >转到 src/assets/libs

现在转到您的 index.html 文件，并删除对 chart.js 的旧引用，添加以下内容:

<script src="assets/libs/chart.bundle.js"></script>

由于某些原因，我尝试了您的项目，而www内的index.html尚未更新，也许您也需要在其中添加该引用.

I have created a new project and tried to implement charts using ChartJS2 from this link

app.module.ts

...
import { ChartModule } from 'ng2-chartjs2';

@NgModule({
  ...
  imports: [
    ChartModule
  ],
  ...
})
export class AppModule {}

index.html

<script src="../node_modules/chart.js/src/chart.js"></script>
<!--<script src="node_modules/chart.js/src/chart.js"></script>-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>-->

<!-- Tried all three  -->

home.ts

...    
import { Chart } from 'ng2-chartjs2';
...
export class HomePage {

  ...
  labels: string[] = ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"];
  data: Chart.Dataset[] = [
    {
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
    borderWidth: 1
     } 
  ];
}

I'm getting an error

chart.js:21 You must include Chart.js 2.0 Library in your index.html in order for ng2-chartjs2 to work.

Github Repo - Here is my full program with this error

Any help would be appreciated. Thanks.

解决方案

try this

Add a folder inside of your src/assets named libs, then copy node_modules/chart.js/dist/Chart.bundle.js to src/assets/libs

Now go to your index.html file and remove the old reference to chart.js add this one:

<script src="assets/libs/chart.bundle.js"></script>

I have tried your project for some reason the index.html inside of www wasn't updated, maybe you need to add that reference there too.

这篇关于Ionic2中的ChartJS2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！