Question

我想在我的角度应用程序中使用甜甜圈图。我通过使用'npm install chart.js --save安装了图表js。但是我的问题是，即使我从'chart.js'导入'import {Chart}这样的类，它也不知道Chart。当我运行服务器时，我总是会遇到此错误：

Chart.js:8459 Failed to create chart: can't acquire context from the given item

这是我在ts中的代码

ngOnInit() {
this.PieChart = new Chart('pieChart', {
  type: 'doughnut',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [9,7 , 3, 5, 2, 10],
      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
    }]
  },
  options: {
    title:{
      text:"Bar Chart",
      display:true
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero:true
        }
      }]
    }
  }
});

}

这是我在html中的代码

<div style="text-align:center">
        <canvas id="pieChart"></canvas>
      </div>

Answer 1

我很难获得ID

<canvas id="myChart"></canvas>

 var ctx = document.getElementById("myChart");
 var myChart = new Chart(ctx,{
    type: 'pie',
    data: data,
    options: options
})

Answer 2

您需要确保在渲染视图之前创建图表。为此，请参见

https://stackoverflow.com/a/53166341/3504273

创建图表失败

2 个答案: