Question

我创建了一个新项目并尝试使用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
     } 
  ];
}

我收到错误

chart.js：21您必须在index.html中包含Chart.js 2.0库为了使ng2-chartjs2起作用。

Github Repo - Here is my full program with this error

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

Answer 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.

Ionic2中的ChartJS2

1 个答案: