Chart.js Наведите курсор мыши на Показать старые данные диаграммы

Question

У меня возникли некоторые проблемы при попытке перерисовать диаграмму на холсте с помощью chart.js в Angular. Вот мой 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

Я предпочитаю не разрушать вашу диаграмму, просто измените ее значение, например: в вашей функции изменения просто загрузите новое определение диаграммы в той же диаграмме с новым конфигом, у нас есть 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 .

Answer 2

это происходит потому, что chartjs использует canvas, а для перерисовки вам просто нужно уничтожить старый рисунок из canvas.
когда вы создаете новый график, вы должны уничтожить старый график. но в угловых вы также можете просто перезагрузить компонент, чтобы уничтожить диаграмму

ваш метод

//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
 }
 )