Question

我一直在将chart.js与图表附加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>

chart.js平移时间线图

0 个答案: