Question

我不知道为什么我的图表的工具提示不显示...有人可以告诉我我在做什么错吗？

如果我将图表类型设置为“条形”，则工具提示可以正常工作，但由于某些原因不能与“折线”一起使用。我对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>

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

0 个答案: