chart.js панорамирование на временной шкале - PullRequest
Новая
       1

chart.js панорамирование на временной шкале

0 голосов
/ 11 марта 2019

Я использую файл 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...