Chart.js按钮更新图表后，hover tooltip时出现实例跳变问题求助

Hey there, I’ve run into this exact tooltip jumping issue with Chart.js before—super frustrating, right? Let’s break down what’s happening and fix it!

What’s Causing the Jump? #

The problem here is that every time you click the button to update the chart, you’re creating a new Chart.js instance without destroying the old one. Now you’ve got multiple overlapping chart instances on the same canvas element. When you hover over the chart, both instances try to show their tooltips, which makes it look like the tooltip is jumping between two versions of the chart.

Solution 1: Destroy Old Instance Before Creating a New One #

The simplest fix is to keep track of your chart instance and destroy it before creating a new one. Here’s how to adjust your code:

First, declare a variable outside your chart function to hold the instance reference:

// Keep track of the chart instance in a scoped/global variable
let overviewChart = null;

Then, modify your chart update function to check for an existing instance and destroy it first:

function updateOverviewChart(data) {
  const ctx = document.getElementById('yourChartCanvasId').getContext('2d');

  // Destroy the old chart if it exists
  if (overviewChart) {
    overviewChart.destroy();
  }

  // Create the new chart instance
  overviewChart = new Chart(ctx, {
    type: 'bar', // Adjust to your chart type
    data: {
      labels: ['Jan', 'Feb'],
      datasets: [
        {
          label: 'First Dataset',
          data: [data.jan[0], data.feb[0]],
          // Add your dataset styling here
        },
        {
          label: 'Second Dataset',
          data: [data.jan[1], data.feb[1]],
          // Add your dataset styling here
        }
      ]
    },
    options: {
      // Your chart options (tooltips, scales, etc.)
    }
  });
}

Now, when you trigger the update via your button click:

// Example button click handler
document.getElementById('updateChartBtn').addEventListener('click', () => {
  const newData = { jan: [250, 50], feb: [320, 80] }; // Your new hardcoded data
  updateOverviewChart(newData);
});

Solution 2: Update Existing Instance (More Efficient) #

Instead of destroying and recreating the chart every time, you can directly update the data of the existing instance. This is better for performance, especially with larger charts:

First, initialize your chart once on page load:

let overviewChart = null;

// Initialize the chart with default data
function initOverviewChart() {
  const ctx = document.getElementById('yourChartCanvasId').getContext('2d');
  overviewChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Jan', 'Feb'],
      datasets: [
        {
          label: 'First Dataset',
          data: [overview2017.jan[0], overview2017.feb[0]],
          // Styling
        },
        {
          label: 'Second Dataset',
          data: [overview2017.jan[1], overview2017.feb[1]],
          // Styling
        }
      ]
    },
    options: {
      // Your options
    }
  });
}

// Run initialization when the page loads
window.addEventListener('load', initOverviewChart);

Then, create an update function that modifies the existing data and triggers a chart update:

function updateOverviewChart(newData) {
  // Update the dataset data
  overviewChart.data.datasets[0].data = [newData.jan[0], newData.feb[0]];
  overviewChart.data.datasets[1].data = [newData.jan[1], newData.feb[1]];

  // Tell Chart.js to update the chart with new data
  overviewChart.update();
}

Use the same button click handler as before to call this update function. This way, you only have one chart instance at a time, so tooltips won’t jump between versions.

Quick Check #

Make sure you’re targeting the correct canvas element ID in your code—mixing up IDs can also lead to unexpected behavior!

内容的提问来源于stack exchange，提问作者Damo