Javascript 没有鼠标悬停，无法显示点值

在此，我在

Laravel

框架中使用了

JavaScript

折线图。鼠标悬停工具提示显示点值，可与

标签：函数（…）

完美配合使用。我只需要在创建时在图表的每个点上显示y轴值（无需鼠标悬停）。为了执行此操作，我使用了中的

drawDatasetPointsLabels（）

方法，并在图表

选项上调用它。但不幸的是，它不起作用。下面是代码

图表刀片

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

document.getElementById("history_canvas_holder").innerHTML = ' ';
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);
          }
      });
  });         
}

monthlabels={……}；
销售数量={……}；
库存数量={……}；
document.getElementById（“history\u canvas\u holder”）.innerHTML=''；
document.getElementById（“history\u canvas\u holder”）.innerHTML=''；
var ctx=document.getElementById（“历史图表”）.getContext（“2d”）；
var myLineChart=新图表（ctx，
{
键入：“行”，
数据：
{
标签：月标签，
数据集：[{
标签：“销售”，
数据：销售数量，
边框颜色：[
'rgba（255,99132,1）'
],
边框宽度：2
},
{
标签：“股票”，
数据：库存数量，
边框颜色：[
‘rgba（0161232）’
],
边框宽度：2
}
]
},
选项：{
工具提示：{
回调：{
标签：函数（工具提示项、数据）{
var label=data.datasets[tooltipItem.datasetIndex].label | |“”；
如果（标签）{
标签+='：'；
}
label+=数学圆（tooltipItem.yLabel*100）/100；
退货标签；
},
onAnimationProgress:function（）{drawDatasetPointsLabels（ctx）}，
onAnimationComplete:function（）{drawDatasetPointsLabels（ctx）}
}
}
}                  
});
函数drawDatasetPointsLabels（ctx）{
ctx.font='.9rem“ABCD”，无衬线；
ctx.fillStyle='#AAA'；
ctx.textAlign=“中心”；
$（historyChart.datasets）。每个（函数（idx，dataset）{
$（dataset.points）。每个（函数（pdx，pointinfo）{
如果（pointinfo.value！==null）{
填充文本（pointinfo.value，pointinfo.x，pointinfo.y-15）；
}
});
});         
}
在v2.5.0类型中

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

或

v2.1.4的类型

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

人们说这些方法是可行的，但不是在所有的图表类型中。
这是一个非常古老的问题（超过4年了），可能不再相关。如果您需要为每个点显示标签，也许您应该考虑使用流行的Chart.js标签插件：
`Chart.defaults.global.tooltips.enabled = false;`