Chart.js 工具提示未显示在折线图上答案

【问题标题】：Chart.js tooltip not showing on line chartChart.js 工具提示未显示在折线图上
【发布时间】：2019-01-22 21:21:07
【问题描述】：

我不知道为什么我的图表的工具提示没有显示...谁能告诉我我做错了什么？

如果我将图表类型设置为“条形”，但由于某种原因不适用于“线”，工具提示可以正常工作。我对 chart.js 比较陌生，可能会犯一些基本的新手错误？

这是我当前的代码：

   <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.min.js"></script>
</head>
<body onLoad="ready()">
<canvas id="myChart" width="250" height="150"></canvas>
<script>
  var ctx = document.getElementById("myChart");
  var myChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels:[],
      datasets: [{
        label: 'Applicants',
        data: [],//start empty
        backgroundColor: [
'rgba(10, 168, 196, 0.2)'     
        ],
        borderColor: [
'rgba(10, 168, 196, 1)' 
        ],
      }]
    },
    options: {
        tooltips: {
            enabled: true
        },
         legend: {
            display: false
         },

      scales: {
       xAxes: [{
type: 'time',
//        time: {
 //                unit: 'day'

  //         }
        }],
        yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
      },
      onClick: handleClick
    }
  });
  window.onmessage = function(event){
      myChart.data.datasets[0].data = event.data.data;
   myChart.data.labels = event.data.labels;
   myChart.update();
  };
  function handleClick(e){
    var activeBars = myChart.getElementAtEvent(e);
    var value = myChart.config.data.datasets[activeBars[0]._datasetIndex].data[activeBars[0]._index];
    var label = activeBars[0]._model.label;
    window.parent.postMessage({
      "type":"click",
      "label":label,
      "value":value
    } , "*");
  }
  function ready(){
    window.parent.postMessage({"type":"ready"}, "*");
  }
</script>
</body>
</html>

【问题讨论】：

选项是options.tooltips 通知tooltips 而不是tooltip。也许这就是为什么它没有为您启用。 chartjs.org/docs/latest/configuration/…
如果上述评论没有帮助，那么您能否举个例子说明event.data.data 和event.data.labels 是什么？在window.onmessage函数中
@AndrewLohr 已将我的代码更正为工具提示，复数，但它仍然无法正常工作。我的数据和标签如下所示： 0: "{\"day\":\"2018/11/28\",\"total\":1}" 1: "{\"day\":\"2018 /12/13\",\"total\":1}" 2: "{\"day\":\"2018/12/29\",\"total\":2}" 3: "{\ "day\":\"2019/1/1\",\"total\":3}" 4: "{\"day\":\"2019/1/2\",\"total\": 1}" 5: "{\"天\":\"2019/1/8\",\"总计\":2}" 6: "{\"天\":\"2019/2/12\ ",\"总计\":1}"
@AndrewLohr 以上是数据和标签在数组中的样子。或者，它们看起来像这样：数据 = 1,1,2,3,1,2,1 标签 = 2018/11/28,2018/12/13,2018/12/29,2019/1/1,2019/ 1/2,2019/1/8,2019/2/12
标签显示给我。您可以使用代码 sn-p 功能并编辑您的帖子以显示它不起作用的示例吗？

标签： javascript tooltip chart.js chart.js2

【解决方案1】：

对于使用 Chartjs v3 遇到此问题的任何人，您需要确保您已注册 Tooltip 插件：

import { Chart, Tooltip } from 'chart.js'

Chart.register([Tooltip])

【讨论】：

谢谢你！
Chartjs v2.0.2 怎么样？我的提示键上只有mode: 'label'