图表.js工具提示未显示在折线图上

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

如果我将图表类型设置为"条形"，但由于某种原因无法使用"线"，则工具提示工作正常。我对图表相对较新.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>

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

import { Chart, Tooltip } from 'chart.js'
Chart.register([Tooltip])

相关内容

最新更新

热门标签：