ChartJS2 in Ionic2 | 易学教程

问题

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.

回答1:

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.

来源：https://stackoverflow.com/questions/40131087/chartjs2-in-ionic2

标签

cordova

ionic2

chart.js