如何在 ChartJS 中包含适配器和插件

Posted 2023-05-09

技术标签:

【中文标题】如何在 ChartJS 中包含适配器和插件【英文标题】：How to include adapters and plugins with ChartJS 【发布时间】：2021-10-07 01:14:43 【问题描述】：

将 Chart.js 与时间序列数据（需要像 moment.js 这样的适配器）和仅使用 CDN 的缩放/平移功能 (chartjs-plugin-zoom) 一起使用的最新 (ES6) 和最小方式是什么？一定要使用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"  ></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>

【问题讨论】：

【参考方案1】：

如 documentation 和 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"  ></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>

【讨论】：

太棒了！没有意识到这是单独包含的 moment.js 模块加上单独包含的模块的适配器

以上是关于如何在 ChartJS 中包含适配器和插件的主要内容，如果未能解决你的问题，请参考以下文章

是否可以在 IBM MFP 的一个文件中包含所有适配器配置

Android：ListView在一行中包含所有值

当 listview 行项目中包含隐藏视图时，片段不尊重匹配父高度

分配器无国籍意味着什么？

Java中简单工厂模式，工厂模式，抽象工厂模式，策略模式和适配器模式学习

我如何才能将下一个与嵌套集成？