chart.js在时间轴图上缩放

问题描述 投票:0回答:1

我一直在将chart.js与Chart附件chartjs-chart-timeline和chartjs-plugin-zoom结合使用。

但是我在使平移和缩放正常工作方面取得的成功有限。

我对其他图表类型(例如折线图)感到厌倦,并在其中获得了成功。

此图表类型是否可能不支持在图表上进行平移和缩放?

$(document).ready(function() {

    var timeData = {
      "labels": ["Cool Graph", "heater1"],
      "datasets": [{
          "data": [
            [
              "2018-01-22T16:00:00.000Z",
              "2018-01-23T05:40:44.626Z",
              "Unknown",
              "Other Data"
            ]
          ]
        },
        {
          "data": [
            [
              "2018-01-22T16:00:00.000Z",
              "2018-01-22T20:00:00.000Z",
              "On"
            ],
            [
              "2018-01-22T20:00:00.000Z",
              "2018-01-23T04:57:55.437Z",
              "Off"
            ],
            [
              "2018-01-23T04:57:55.437Z",
              "2018-01-23T05:40:44.626Z",
              "On"
            ]
          ]
        }
      ]
    }

    var timeOptions = {
      "elements": {
        "colorFunction": function(text, data, dataset, index) {
          if (text == "On") {
            return Color('red');
          }
          return Color('green');
        },
        "showText": true,
        "textPadding": 4,
      },
      pan: {
        enabled: true,
        mode: "x"
      },
      zoom: {
        enabled: true,
        drag: false,
        mode: "x"
      }
    };

    var ctx = document.getElementById("chartCanvas").getContext("2d");
    new Chart(ctx, {
      type: 'timeline',
      data: timeData,
      options: timeOptions
    });

  });
<!DOCTYPE html>
<html>
<body>

<div>
  <canvas id="chartCanvas"></canvas>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/0.6.6/chartjs-plugin-zoom.min.js"></script>
<script src="https://dl.dropbox.com/s/uh7idhv5szovjem/timeline.min.js"></script>

</body>
</html>
javascript html5 charts
1个回答
0
投票

提示:首先在chart.js和zoom插件之前包含锤子:

© www.soinside.com 2019 - 2024. All rights reserved.