如何让环形图（Doughnut Chart）中的提示框始终可见？

Hey there! I see you're trying to keep the tooltip on your doughnut chart visible at all times, not just when hovering over segments. The default Chart.js tooltip only triggers on hover, but we can fix this with a custom plugin since there’s no built-in "always show" option in most versions. Let’s adjust your setup to make this work.

For Chart.js v2 (matches your existing config structure) #

Your current code handles tooltip label formatting perfectly, but it doesn’t address persistent display. Add this custom plugin alongside your existing options to force the tooltip to stay visible:

// Your original chart options
const doughnutChartOptions = { 
  responsive: true, 
  legend:{ 
    display:true, 
    position:'bottom' 
  }, 
  tooltips: { 
    enabled: true, 
    callbacks: { 
      label: function(tooltipItem, data) { 
        const label = data.labels[tooltipItem.index]; 
        const datasetValue = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]; 
        return `${label} ${datasetValue}%`; 
      } 
    } 
  } 
};

// Custom plugin to keep tooltip always visible
Chart.plugins.register({
  afterRender: function(chart) {
    const tooltip = chart.tooltip;
    // Only run if tooltips are enabled
    if (chart.config.options.tooltips.enabled) {
      // If no tooltip is active, manually activate all segments (adjust for specific ones if needed)
      if (!tooltip._active || tooltip._active.length === 0) {
        const activeElements = chart.getDatasetMeta(0).data.map((_, index) => ({
          datasetIndex: 0,
          index: index
        }));
        tooltip._active = activeElements;
        tooltip.update();
        chart.draw();
      }
    }
  }
});

// Initialize your chart (replace ctx and yourChartData with your actual values)
const myDoughnutChart = new Chart(ctx, {
  type: 'doughnut',
  data: yourChartData,
  options: doughnutChartOptions
});

Quick Tweaks You Might Want: #

• If you only want the tooltip for a single specific segment, modify the activeElements array to target just that index (e.g., [{ datasetIndex: 0, index: 0 }] for the first segment).
• This plugin runs right after the chart renders, checking if the tooltip has active elements. If not, it manually sets them to keep the tooltip visible.

For Chart.js v3+ (if you’re using the latest version) #

Chart.js v3+ rearranged the config structure (tooltips live under plugins.tooltip now). Here’s the adjusted code for newer versions:

const doughnutChartOptions = {
  responsive: true,
  plugins: {
    legend: {
      display: true,
      position: 'bottom'
    },
    tooltip: {
      enabled: true,
      callbacks: {
        label: (context) => {
          const label = context.label || '';
          const value = context.parsed || 0;
          return `${label} ${value}%`;
        }
      }
    }
  }
};

// Persistent tooltip plugin for v3+
Chart.register({
  id: 'persistentTooltip',
  afterRender: (chart) => {
    const tooltip = chart.plugins.tooltip;
    if (tooltip.options.enabled && !tooltip._active.length) {
      const activeElements = chart.data.datasets[0].data.map((_, index) => ({
        datasetIndex: 0,
        index: index
      }));
      tooltip._active = activeElements;
      tooltip.update();
      chart.draw();
    }
  }
});

// Initialize chart
const myDoughnutChart = new Chart(ctx, {
  type: 'doughnut',
  data: yourChartData,
  options: doughnutChartOptions
});

Just swap in your canvas reference (ctx) and actual dataset (yourChartData), and your tooltip will stay visible permanently!

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