拒绝加载的折线图，图表js和图表js-plugin-crosshair

问题描述

经过几个小时的代码摆弄，我不知道自己在做什么错。（这是我使用html / javascript进行编码的前几天）。

任何人都知道发生了什么问题？我正在尝试使用一些额外的选项（包括插件）制作纯线图。

谢谢。

代码如下：

<html lang="en">

</html>

<head>
  <Meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-crosshair@1.1.6/dist/chartjs-plugin-crosshair.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.bundle.js"></script>
</head>

<body onLoad="ready()"></body>
<canvas id="myChart" width="400" height="150"></canvas>
<script>
  var ctx = document.getElementById('myChart').getContext('2d');
  var myChart = new Chart(ctx,{
        type: 'line',data: {
          labels: [1,2,3],datasets: [{
            label: "Centre of Mass Mouvement",data: [1,backgroundColor: ['rgba(20,35,255,0.2)'],borderColor: ['rgba(20,1)']
          }]
        },options: {
          title: {
            display: true,text: 'Mouvement in the vertical'
          },scale: {
            xAxes: [{
              display: true,scaleLabel: {
                display: true,labelString: 'Time'
              }
            }],yAxes: [{
              display: true,labelString: 'Y value'
              }
            }]
          },tooltips: {
            mode: 'interpolate',intersect: false
          },plugins: {
            crosshair: {
              line: {
                color: '#F66',width: 1,dashPattern: [5,5]
              },sync: {
                enabled: true,group: 1,suppresstooltips: false
              },zoom: {
                enabled: true,zoomBoxBackgroundColor: 'rgba(66,133,244,0.2)',zoomBoxBorderColor: '#48F',zoomButtonText: 'Reset Zoom',zoomButtonClass: 'reset-zoom'
              }
            }
          }
        }
      }; 
                         
window.onmessage = function(event){

    if (event.data && Array.isArray(event.data)) {
      myChart.data.labels = event.data[0];
      myChart.data.datasets.data = event.data[1];
      myChart.update();
    }
    else {
      console.log("HTML Code Element received a generic message:");
      console.log(event.data);
    }
  };

  function handleClick(e){
    var activeBars = myChart.getElementAtEvent(e);

    var value = myChart.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>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html javascript linegraph

拒绝加载的折线图，图表js和图表js-plugin-crosshair

问题描述

解决方法

相关问答