Question

在Angular中尝试使用chart.js在画布上重绘图表时遇到了一些问题。这是我的HTML组件：

<div class="form-group">
    <select [(ngModel)]="timeMode" id="timeModeInput" class="browser-default custom-select" (change)="onTimeModeChange($event)">
       <option value="all" selected>Yearly</option>
       <option value="monthly">Monthly</option>
    </select>
</div>
<canvas id="expenseTimelineCanvas"></canvas>

在下拉菜单中，我重新填充图表：

if (chart != null) { chart.destroy(); chart.clear(); }
chart = new Chart(chartName, {
  type: "line",
  data: {
    labels: labels,
    datasets: [
      {
        data: chartData,
        borderColor: lineColor,
        fill: false,
        borderWidth: 1,
        borderDash: [10, 10],
        pointBackgroundColor: "white",
        pointBorderColor: lineColor,
        pointRadius: 5
      }
    ]
    }
  }
});

但是，当我将鼠标悬停在画布的特定部分时，将显示旧图表。关于在重新部署同一个DOM元素之前如何完全销毁画布的任何想法？

谢谢！

Answer 1

之所以会发生这种情况，是因为chartjs使用画布，并且要进行重新绘制，您只需破坏画布上的旧图纸即可。
制作新图表时，您必须销毁旧图表。但是在角度上，您也可以重新加载组件以破坏图表

您的方法

//this method 
initChart(){
 //this will generate chart you need
 //before generating just destroy the old chart
}

第二种方法

//in html file
<thisIsHTMLTagOfChartComponent *ngIf="showChart">

</thisIsHTMLTagOfChartComponent>

//in typescript
public showChart = false;

//this function will be called everytime you fetch the data from server
getChartData(){
 this.showChart = false; //this will remove the component from the page
 fetchData(uri)
 .then(result => {
   //do your stuff here
   this.showChart = true // this will load the component in the page again
 }
 )

Answer 2

我宁愿不破坏图表，而只是更改它的值，例如：在更改功能中，只需使用新配置在同一图表中加载新图表定义，我们就有2种不同的配置：

config = {
      type: 'bar',
      data: {
        labels: dringlichkeiten.map(x => x.id),
        datasets: [
          {
            label: 'My Bar Chart',
            data: dringlichkeiten.map(x => x.value),
            backgroundColor: ['red', 'green', 'yellow', 'blue', 'orange']
          }
        ]
      },
    }
  config2 = {
      type: 'line',

      data: {
        datasets: [{
          label: 'Höhenlinie',
          backgroundColor: "rgba(255, 99, 132,0.4)",
          borderColor: "rgb(255, 99, 132)",
          fill: true,
          data: [
            { x: 1, y: 2 },
            { x: 2500, y: 2.5 },
            { x: 3000, y: 5 },
            { x: 3400, y: 4.75 },
            { x: 3600, y: 4.75 },
            { x: 5200, y: 6 },
            { x: 6000, y: 9 },
            { x: 7100, y: 6 },
          ],
        }]
      },
      options: {
        responsive: true,
        title: {
          display: true,
          text: 'Höhenlinie'
        },
        scales: {
          xAxes: [{
            type: 'linear',
            position: 'bottom',
            ticks: {
              userCallback: function (tick) {
                if (tick >= 1000) {
                  return (tick / 1000).toString() + 'km';
                }
                return tick.toString() + 'm';
              }
            },
            scaleLabel: {
              labelString: 'Länge',
              display: true,
            }
          }],
          yAxes: [{
            type: 'linear',
            ticks: {
              userCallback: function (tick) {
                return tick.toString() + 'm';
              }
            },
            scaleLabel: {
              labelString: 'Höhe',
              display: true
            }
          }]
        }
      }
    }
  chart: Chart ;

在您的更改功能中，只需加载一个新配置：

change(){
    this.chart = new Chart('canvas', this.config2)
  }

DEMO。

Chart.js鼠标悬停在显示旧图表数据上

2 个答案: