如何设置图表的初始缩放值(ChartJS + ChartJS缩放插件)？

Question

我正在尝试创建一个包含过去30天数据的图表。但是我想为小屏幕尺寸设置初始的Zoom值。因此，图表不会在移动设备上显示所有30个值，而是5个或10个。我只需平移或缩小该图表的移动版本即可浏览所有数据。

如何使用ChartJS-plugin-zoom设置缩放的初始值？

谢谢!

​

const ctx = document.getElementById('cumulativeChart');
const labels = [
'Jul 13', 'Jul 14', 'Jul 15', 'Jul 16', 'Jul 17', 'Jul 18',
'Jul 19', 'Jul 20', 'Jul 21', 'Jul 22', 'Jul 23', 'Jul 24',
'Jul 25', 'Jul 26', 'Jul 27', 'Jul 28', 'Jul 29', 'Jul 30',
'Jul 31', 'Aug 01', 'Aug 02', 'Aug 03', 'Aug 04', 'Aug 05',
'Aug 06', 'Aug 07', 'Aug 08', 'Aug 09', 'Aug 10', 'Aug 11',
];

const data = {
labels: labels,
datasets: [{
    label: 'Cumulative Data',
    borderColor: '#3a96fd',
    borderWidth: 2,
    data: [
        0.13299527, 0.16131551, 0.18795605, 0.20597476, 0.22560615, 0.23797296,
        0.25541133, 0.28006363, 0.30473082, 0.32418763, 0.33880094, 0.35331442,
        0.36290294, 0.38035896, 0.40230393, 0.42181523, 0.43855241, 0.4481249,
        0.4696107, 0.48147319, 0.4958352, 0.52931651, 0.55098815, 0.56771866,
        0.58238203, 0.60083731, 0.61222939, 0.6262777, 0.64303029, 0.65866165,
    ],
    pointRadius: 4,
    pointBackgroundColor: '#3a96fd',
    fill: true
}]};

const config = {
type: 'line',
data: data,
options: {
    responsive: true,
    scales: {
        y: {
            grid: {
                color: 'rgba(128,151,177, 0.3)',
                borderDash: [3, 3],
                drawTicks: false,
                borderColor: '#424b5f',
            },
            ticks: {
                align: "center",
                padding: 10,
            },
        },
        x: {
            grid: {
                color: 'rgba(128,151,177, 0.3)',
                borderDash: [3, 5],
                drawTicks: false,
                borderColor: '#424b5f'
            },
            ticks: {
                align: "center",
                padding: 10,
            }
        }
    },
    plugins: {
        legend: {
            display: false
        },
        tooltip: {
            usePointStyle: true,
        },
        zoom: {
            zoom: {
                wheel: {
                    enabled: true,
                },
                pinch: {
                    enabled: true
                },
                mode: 'x',
            },
            pan: {
                enabled: true,
                mode: 'x',
            },
            limits: {
                x: {
                    minRange: 3
                },
            },
        }
    }
}
};

const myChart = new Chart(
ctx,
config
);

<script src="https://cdn.jsdelivr.net/npm/chart.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/1.1.1/chartjs-plugin-zoom.min.js"></script>
<div class="container">
   <h3>Chart Example</h3>
  <div class="chart">
    <canvas id="cumulativeChart"></canvas>
  </div>
</div>

​

Answer 1

您可以调用.zoom函数，该函数将百分比作为要缩放到的数字，因此10%的增加将要求您传递1.1。

它在10ms后超时时被调用的原因是，否则它会缩放比例，而不是点，所以似乎chart.js需要先完成初始化，然后才能调用缩放函数：

​

const ctx = document.getElementById('cumulativeChart');
const labels = [
  'Jul 13',
  'Jul 14',
  'Jul 15',
  'Jul 16',
  'Jul 17',
  'Jul 18',
  'Jul 19',
  'Jul 20',
  'Jul 21',
  'Jul 22',
  'Jul 23',
  'Jul 24',
  'Jul 25',
  'Jul 26',
  'Jul 27',
  'Jul 28',
  'Jul 29',
  'Jul 30',
  'Jul 31',
  'Aug 01',
  'Aug 02',
  'Aug 03',
  'Aug 04',
  'Aug 05',
  'Aug 06',
  'Aug 07',
  'Aug 08',
  'Aug 09',
  'Aug 10',
  'Aug 11',
];

const data = {
  labels: labels,
  datasets: [{
    label: 'Cumulative Data',
    borderColor: '#3a96fd',
    borderWidth: 2,
    data: [
      0.13299527,
      0.16131551,
      0.18795605,
      0.20597476,
      0.22560615,
      0.23797296,
      0.25541133,
      0.28006363,
      0.30473082,
      0.32418763,
      0.33880094,
      0.35331442,
      0.36290294,
      0.38035896,
      0.40230393,
      0.42181523,
      0.43855241,
      0.4481249,
      0.4696107,
      0.48147319,
      0.4958352,
      0.52931651,
      0.55098815,
      0.56771866,
      0.58238203,
      0.60083731,
      0.61222939,
      0.6262777,
      0.64303029,
      0.65866165,
    ],
    pointRadius: 4,
    pointBackgroundColor: '#3a96fd',
    fill: true
  }]
};

const config = {
  type: 'line',
  data: data,
  options: {
    responsive: true,
    scales: {
      y: {
        grid: {
          color: 'rgba(128,151,177, 0.3)',
          borderDash: [3, 3],
          drawTicks: false,
          borderColor: '#424b5f',
        },
        ticks: {
          align: "center",
          padding: 10,
        },
      },
      x: {
        grid: {
          color: 'rgba(128,151,177, 0.3)',
          borderDash: [3, 5],
          drawTicks: false,
          borderColor: '#424b5f'
        },
        ticks: {
          align: "center",
          padding: 10,
        }
      }
    },
    plugins: {
      legend: {
        display: false
      },
      tooltip: {
        usePointStyle: true,
      },
      zoom: {
        zoom: {
          wheel: {
            enabled: true,
          },
          pinch: {
            enabled: true
          },
          mode: 'x',
        },
        pan: {
          enabled: true,
          mode: 'x',
        },
        limits: {
          x: {
            minRange: 3
          },
        },
      }
    }
  }
};

const myChart = new Chart(
  ctx,
  config
);

setTimeout(() => {
  myChart.zoom(3);
  myChart.pan({
    x: Number.MAX_SAFE_INTEGER
  }, undefined, 'default');
}, 10)

<script src="https://cdn.jsdelivr.net/npm/chart.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/1.1.1/chartjs-plugin-zoom.min.js"></script>
<div class="container">
  <h3>Chart Example</h3>
  <div class="chart">
    <canvas id="cumulativeChart"></canvas>
  </div>
</div>

​