使用 Chart.js 和 chartjs-zoom-plugin 的图表缩放和缩放问题答案

【问题标题】：Trouble with chart scaling and zooming using Chart.js and chartjs-zoom-plugin使用 Chart.js 和 chartjs-zoom-plugin 的图表缩放和缩放问题
【发布时间】：2019-08-27 13:47:38
【问题描述】：

我正在尝试将 chartjs-zoom-plugin 添加到我的项目中，其中 Y 轴 - 是从 0 到 100 的温度，而 x - 轴是从 0 到 4200+ 的多个通道。事先，对不起我的英语。

所以，我在我的项目中编写了一些代码，缩放是有效的，但是在缩放时，x 轴索引不会改变，并且很难从我的图表中理解信息。Y 值会根据位置而变化我缩放，但 x 值不缩放。

var ctx, config;

// filler data as actual data was not provided in original post
var dotsForXLabel = [0,700,1400,2100,4160,4200];
var filteredTempMas = [30,10,40,90,100,-60];

function buildChart() {
  config = new Chart(ctx, {
    type: "line",
    data: {
      "labels": dotsForXLabel,
      "datasets": [{
        "label": "DTS Riga",
        "data": filteredTempMas,
        "fill": false,
        "borderColor": "rgb(192,35,16)",
        "pointRadius": 0.5,
        "pointHoverBackgroundColor": 'red',
        "pointHoverBackgroundColor": 'red',
        "lineTension": 0.1
      }]
    },
    options: {
      responsive: true,
      // tooltips: {
      //     mode: 'dataset'
      // },
      scales: {
        xAxes: [{
          ticks: {
            beginAtZero: true,
          },

          scaleLabel: {
            display: false,
            labelString: 'Метр участка ОВК',
          },

        }],
        yAxes: [{
          ticks: {
            beginAtZero: true,

          },
          scaleLabel: {
            display: true,
            labelString: 'Температура'
          }
        }]
      },




      plugins: {
        zoom: {
          zoom: {
            enabled: true,
            mode: 'x', // Allow zooming in the x direction
            rangeMin: {
              x: 0 // Min value of the duration option
            },
            rangeMax: {
              x: 100 // Max value of the duration option
            },
            drag: true,
            mode: 'xy',
            speed: 0.7
          }
        },
        pan: {
          enabled: true, // Enable panning
          mode: 'x', // Allow panning in the x direction
          rangeMin: {
            x: 0 // Min value of the delay option
          },
          rangeMax: {
            x: 100 // Max value of the delay option
          }
        },

      }
    }
  });
};

window.resetZoom = function() {
  window.myLine.resetZoom();
};

window.toggleDragMode = function() {
  var chart = window.chart;
  var zoomOptions = config.options.plugins.zoom.zoom;
  zoomOptions.drag = !zoomOptions.drag;
  chart.update();
  document.getElementById('drag-switch').innerText = zoomOptions.drag ? 'Disable drag mode' : 'Enable drag mode';
};

window.onload = function() {
  ctx = document.getElementById('canvas').getContext('2d');
  buildChart();
  //window.myLine = new window.Chart(ctx, config);
};

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@0.7.5"></script>
</head>

<body>
  <div>
    <canvas id='canvas' />
  </div>
</body>

实际图表的屏幕截图：

【问题讨论】：

标签： javascript charts chart.js zooming pan

【解决方案1】：

平移选项应放在 options.zoom 下（与 options.zoom.zoom 级别相同）。
option.zoom.zoom.mode 被指定了两次 - 其中一个应该被删除。
rangeMin 和 rangeMax 值仅限制轴范围（作为最小值和最大值），对持续时间没有影响

*在下面的固定示例中，dragZoom 已被禁用以允许在放大时进行平移。

var ctx, config;

// filler data as actual data was not provided in original post
var dotsForXLabel = [0, 700, 1400, 2100, 4160, 4200];
var filteredTempMas = [30, 10, 40, 90, 100, -60];

function buildChart() {
  config = new Chart(ctx, {
    type: "line",
    data: {
      "labels": dotsForXLabel,
      "datasets": [{
        "label": "DTS Riga",
        "data": filteredTempMas,
        "fill": false,
        "borderColor": "rgb(192,35,16)",
        "pointRadius": 0.5,
        "pointHoverBackgroundColor": 'red',
        "pointHoverBackgroundColor": 'red',
        "lineTension": 0.1
      }]
    },
    options: {
      responsive: true,
      // tooltips: {
      //     mode: 'dataset'
      // },
      scales: {
        xAxes: [{
          ticks: {
            beginAtZero: true,
          },

          scaleLabel: {
            display: false,
            labelString: 'Метр участка ОВК',
          },

        }],
        yAxes: [{
          ticks: {
            beginAtZero: true,

          },
          scaleLabel: {
            display: true,
            labelString: 'Температура'
          }
        }]
      },




      plugins: {
        zoom: {
          zoom: {
            enabled: true,
            mode: 'x', // Allow zooming in the x direction
            rangeMin: {
              x: 0 // 
            },
            rangeMax: {
              x: 4200 //
            },
            //drag: true,
            //mode: 'xy',
            speed: 0.7
          },

          pan: {
            enabled: true, // Enable panning
            mode: 'x', // Allow panning in the x direction
            rangeMin: {
              x: 0 //
            },
            rangeMax: {
              x: 4200 // 
            }
          }
        }

      }
    }
  });
};

window.onload = function() {
  ctx = document.getElementById('canvas').getContext('2d');
  buildChart();
  //window.myLine = new window.Chart(ctx, config);
};

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@0.7.5"></script>
</head>

<body>
  <div>
    <canvas id='canvas' />
  </div>
</body>

【讨论】：