没有鼠标悬停无法显示点值答案

【问题标题】：Unable to display point values without mouse hover没有鼠标悬停无法显示点值
【发布时间】：2019-09-05 10:46:00
【问题描述】：

我在Laravel 框架内使用了JavaScript 折线图。鼠标悬停工具提示可显示与label:function(...) 完美配合的点值。我只需要在创建图表的每个点上显示 y 轴值（没有鼠标悬停）。为此，我使用了How to display Line Chart dataset point labels with Chart.js? 中的drawDatasetPointsLabels() 方法并在图表options 上调用它。但不幸的是，它不起作用。下面是代码。

chart.blade

monthlabels={.......};
salesqty = {......};
stockqty = {......};

document.getElementById("history_canvas_holder").innerHTML = '&nbsp;';
document.getElementById("history_canvas_holder").innerHTML = '<canvas id="historyChart" width="500" height="350"></canvas>';
var ctx = document.getElementById("historyChart").getContext('2d');
var myLineChart = new Chart(ctx, 
{
  type: 'line',
  data: 
  {
      labels: monthlabels,
      datasets: [{
          label: 'Sales',
          data: salesqty,
          borderColor: [
              'rgba(255,99,132,1)'
          ],
          borderWidth: 2
      },
      {
          label: 'Stock',
          data: stockqty,
          borderColor: [
              'rgba(0,161,232)'
          ],
          borderWidth: 2
      }
      ]
  },
  options: {
      tooltips: {
          callbacks: {
              label: function(tooltipItem, data) {
                  var label = data.datasets[tooltipItem.datasetIndex].label || '';

                  if (label) {
                      label += ': ';
                  }
                  label += Math.round(tooltipItem.yLabel * 100) / 100;
                  return label;
              },
              onAnimationProgress: function() { drawDatasetPointsLabels(ctx) },
              onAnimationComplete: function() { drawDatasetPointsLabels(ctx) } 
          }
      }
  }                  
});

function drawDatasetPointsLabels(ctx) {
  ctx.font = '.9rem "ABCD",sans-serif';
  ctx.fillStyle = '#AAA';
  ctx.textAlign="center";
  $(historyChart.datasets).each(function(idx,dataset){
      $(dataset.points).each(function(pdx,pointinfo){
          if ( pointinfo.value !== null ) { 
              ctx.fillText(pointinfo.value,pointinfo.x,pointinfo.y - 15);
          }
      });
  });         
}

【问题讨论】：

这是一个非常古老的问题（超过 4 岁），可能不再相关。如果您需要为每个点显示标签，也许您应该考虑使用流行的 Chart.js 插件插件：github.com/chartjs/chartjs-plugin-datalabels

标签： javascript laravel callback chart.js

【解决方案1】：

在v2.5.0的类型

`options: {
    tooltips: {
         enabled: false
    }
}`

或

`tooltips :{
            custom : function(tooltipModel) {
                tooltipModel.opacity = 0;
            }
 }`

v2.1.4 的类型

`Chart.defaults.global.tooltips.enabled = false;`

人们说这些方法是可行的，但并非在所有图表类型中。

【讨论】：