ChartJS 创建图表失败：无法从给定的项目获取上下文Angular

htzpubme 于 2023-10-18 发布在 Chart.js

关注(0)|答案(1)|浏览(145)

我在Angular 15中使用Chart.js，控制台显示以下内容。2个错误-
1.vendor.js：209527创建图表失败：无法从给定项目获取上下文。
1.Canvas已在使用中。必须先销毁ID为“2”的图表，然后才能重用ID为“MyChart”的画布。我有输入字段，可以将数据添加到图表中。添加后，我看到了这个错误。即使应用程序运行，但我想需要修复这个错误。它是可能的，而不添加ng 2-图表库？
HTML

<div class="chart-container" [hidden]="!chart">
        <canvas  id="MyChart" >{{chart}}</canvas>
    </div>

ts

if (this.chart)
      this.chart.destroy();    
       this.chart = new Chart('MyChart', {
        type: 'line',
         data: {
         labels: monthLabels,
         datasets: [
          {
            label: 'Weight',
            data: weightLabels,
            backgroundColor: 'blue',
          },
        ],
      },
      options: {
        aspectRatio: 2.5,        
      },

chart.js

来源：https://stackoverflow.com/questions/77173342/failed-to-create-chart-cant-acquire-context-from-the-given-item-angular

1条答案

按热度按时间

ddarikpa1#

从您的错误消息中，相信您正在尝试添加数据并重新绘制图表。如果图表已经呈现，并且您正在尝试重新绘制图表，则会遇到此问题。
方法1：每次将数据添加到图表并重新绘制时销毁图表：

// Destroy chart element if existed
if (this.chart)
  this.chart.destroy();

// Add data into the `weightLabels` and `monthLabels`

// Create the chart instance
this.chart = new Chart('MyChart', {
  type: 'line',
  data: {
    labels: monthLabels,
    datasets: [
      {
        label: 'Weight',
        data: weightLabels,
        backgroundColor: 'blue',
      },
    ],
  },
  options: {
    aspectRatio: 2.5,        
  }
});

方法2：使用update() API

this.monthLabels.push(/* month value */);
this.weightLabels.push(/* weight value */);

// Or
//this.chart.data.labels?.push(/* month value */);
//this.chart.data.datasets[0].data.push(/* weight value */);

this.chart.update();

注意，在<canvas元素中不需要Angular插值{{ chart }}。当您通过指定元素id作为第一个参数来创建Chart示例时，它将找到匹配的HTML元素并呈现。

<div class="chart-container" [hidden]="!chart">
  <canvas id="MyChart"></canvas>
</div>

Demo @ StackBlitz
参考：Line Chart Demo with adding data

赞(0）回复(0）举报 2023-10-18

我来回答

ChartJS 创建图表失败：无法从给定的项目获取上下文Angular

1条答案

相关问题

热门标签

最新问答