如何使用 ChartJS 包含适配器和插件

Question

将 Chart.js 用于时间序列数据（需要像 moment.js 这样的适配器）和 zoom/pan 功能（chartjs-插件缩放）仅使用 CDN？您是否必须使用 require 或 import？

下面的代码将抛出与来自其他适配器和插件的缺失函数相关的错误。

var default_series = [1, 2, 3, 4, 5];
var default_time_series = [new Date()];

for (let i = 1; i < 5; i++)
{
    var tempDay = new Date(default_time_series[i - 1]);
        tempDay.setDate(tempDay.getDate() + 1);
      default_time_series.push(new Date(tempDay.valueOf()));
}

const default_chart_dataset = {
        data: [],
        label: 'Default',
        borderColor: '#000000',
        fill: false,
        hidden: false,
        spanGaps: false,
        pointRadius: 0
};

var chart_data = {
    type: 'line',
    data: {
        labels: [],
        datasets: []
    },
    options: {
        title: {
            display: true,
            text: "A Chart"
        },
        scales: {
            x: {
                type: "time",
                time: {
                    // unit: 'day',
                    // tooltipFormat: 'MMM DD',
                    displayFormats: {
                        day: 'MMM DD YY'
                    }
                }
            }
        },
        plugins: {
            zoom: {
                pan: {
                    enabled: true,
                    mode: 'x'
                },
                zoom: {
                    wheel: {
                        enabled: true
                 },
                    pinch: {
                        enabled: true
                    },
                    mode: 'x'
                }
            }
        }
    }
};

var main_chart = new Chart(document.getElementById('a-chart').getContext('2d'), chart_data);
main_chart.data.datasets.push({...default_chart_dataset});
main_chart.data.datasets[0].data = [...default_series];
main_chart.data.labels = [...default_time_series];
main_chart.update();

<html lang="en">
  <body>
    <canvas id="a-chart" class="a-graph" width="850" height="350"></canvas>

    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.5.0/dist/chart.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8/hammer.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@1.1.1/dist/chartjs-plugin-zoom.min.js"></script>
  </body>
</html>

Answer 1

如 documentation and migration guide 中所述，自 chart.js 版本 3 起，您需要自己包含一个日期适配器。

示例：

var default_series = [1, 2, 3, 4, 5];
var default_time_series = [new Date()];

for (let i = 1; i < 5; i++) {
  var tempDay = new Date(default_time_series[i - 1]);
  tempDay.setDate(tempDay.getDate() + 1);
  default_time_series.push(new Date(tempDay.valueOf()));
}

const default_chart_dataset = {
  data: [],
  label: 'Default',
  borderColor: '#000000',
  fill: false,
  hidden: false,
  spanGaps: false,
  pointRadius: 0
};

var chart_data = {
  type: 'line',
  data: {
    labels: [],
    datasets: []
  },
  options: {
    title: {
      display: true,
      text: "A Chart"
    },
    scales: {
      x: {
        type: "time",
        time: {
          // unit: 'day',
          // tooltipFormat: 'MMM DD',
          displayFormats: {
            day: 'MMM DD YY'
          }
        }
      }
    },
    plugins: {
      zoom: {
        pan: {
          enabled: true,
          mode: 'x'
        },
        zoom: {
          wheel: {
            enabled: true
          },
          pinch: {
            enabled: true
          },
          mode: 'x'
        }
      }
    }
  }
};

var main_chart = new Chart(document.getElementById('a-chart').getContext('2d'), chart_data);
main_chart.data.datasets.push({ ...default_chart_dataset
});
main_chart.data.datasets[0].data = [...default_series];
main_chart.data.labels = [...default_time_series];
main_chart.update();

<html lang="en">

<body>
  <canvas id="a-chart" class="a-graph" width="850" height="350"></canvas>

  <script src="https://cdn.jsdelivr.net/npm/chart.js@3.5.0/dist/chart.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8/hammer.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@1.1.1/dist/chartjs-plugin-zoom.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-adapter-moment/1.0.0/chartjs-adapter-moment.js"></script>
</body>

</html>

如何使用 ChartJS 包含适配器和插件

How to include adapters and plugins with ChartJS

javascript

momentjs

hammer.js

chart.js

chartjs-plugin-zoom