chartjs：条形小于实际列，工具提示不显示答案

【问题标题】：chartjs: bars smaller than actual column, tooltip doesn't displaychartjs：条形小于实际列，工具提示不显示
【发布时间】：2021-08-02 22:06:40
【问题描述】：

如您所见，我的条并没有覆盖标签“列”的整个宽度。我的工具提示仅显示我是否正好悬停在条上，或者，如果我删除了条，则正好在线点上。

options: {
    plugins: {
        legend: { display: false },
        title: { display: false },
        tooltip: {
            displayColors: false, backgroundColor: '#ffffff',
            bodyColor: '#595f69', bodyFont: {size: 14},
            borderColor: '#595f69', borderWidth: 1,
            titleFont: {size: 0}
        }
    },
    responsive: true, aspectRatio: 4,
    scales: {
        y: { display: true, suggestedMin: 0, suggestedMax: 80, ticks: { stepSize: 20 } },
        y1: {display: false, suggestedMin: 0, suggestedMax: 80, ticks: { stepSize: 2 }},
        x: { grid: { drawBorder: false, display: false } }

我尝试了 chartjs crosshair 之类的插件，但无法使其与 typescript 一起使用。

我怎样才能让鼠标悬停在标签“列”区域的任何地方都显示工具提示？

【问题讨论】：

标签： reactjs chart.js

【解决方案1】：

您可以将 intersect 属性设置为 false 以始终获取工具提示，而无需精确地与条相交：

var options = {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      borderWidth: 1
    }]
  },
  options: {
    plugins: {
      tooltip: {
        intersect: false
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.js"></script>
</body>

【讨论】：

谢谢，它可以工作，此外我还添加了 mode: 'index' 并且效果更好

【解决方案2】：

您可以通过编辑回调来制作自己的工具提示，我必须在我的折线图上从所有数据集中获取光标周围最接近的值。这适用于 Chartjs 2.9.3：

tooltips: {
    mode: "x",
    position: "nearest",
    intersect: false,
    callbacks: {
        beforeBody: function(tooltipItems, allData) {
            let x = tooltipItems[0].x; // get x coordinate

            let datasets = allData.datasets; // datasets
    
            let values = [];
            for (i in datasets) {
                let dataset = datasets[i]; 

                let meta = this._chart.getDatasetMeta(i); // dataset metadata
                let xScale = this._chart.scales[meta.xAxisID]; // dataset's x axis
                let xValue = xScale.getValueForPixel(x); // we get the x value on the x axis with x coordinate

                let data = dataset.data // data

                // search data for the first value with a bigger x value
                let index = data.findIndex(function(o) { 
                    return o.x >= xValue; 
                });

                let value = data[index]; // this is our nearest value

                // format label
                if (isNaN(value.ymax)) {
                    values.push(`${dataset.label}: ${value.y}\n`);
                } else {
                    values.push(`${dataset.label}: ${value.y}, min: ${value.ymin}, max: ${value.ymax}\n`)
                }
            }

            return values.join(""); // return label
        },

        label: function() { // this needs to be empty

        },
    }
},

【讨论】：