Chartjs插件延迟抛出“未捕获的类型错误：无法读取未定义的属性'plugins'”错误

xfb7svmp 于 2022-11-06 发布在 Chart.js

关注(0)|答案(1)|浏览(153)

我想延迟加载Chart.js生成的图表。不幸的是，当我加载插件时，我得到：

Uncaught TypeError: Cannot read property 'plugins' of undefined"

我在用

<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-deferred@1.0.2/dist/chartjs-plugin-deferred.min.js"></script>

和

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.1.1/dist/chart.min.js"></script>

这里有一个最小的小提琴来说明错误https://jsfiddle.net/aqgst865/

是否有任何方法可以修复此错误或替代延迟加载Chart.js图表？

chart.js

来源：https://stackoverflow.com/questions/67484675/chartjs-plugin-deferred-throws-uncaught-typeerror-cannot-read-property-plugin

1条答案

按热度按时间

hsgswve41#

延迟的插件与chart.js版本3不兼容。要修复错误，您必须降级到版本2.9.4

<!DOCTYPE html>
<html>

<head>
  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
  <link href="https://unpkg.com/@tailwindcss/custom-forms@0.2.1/dist/custom-forms.min.css" rel="stylesheet">

  <link href="/static/style.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-deferred@1.0.2/dist/chartjs-plugin-deferred.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

</head>

<body>

  <div class="chartcontainer">

    <div class="mx-auto max-w-md">
      <canvas id="A" width="400" height="400"></canvas>
    </div>
    <script>
      var ctx = document.getElementById("A").getContext('2d');
      var myChart = new Chart(ctx, {
        type: 'line',
        data: {

          labels: ['2016.05.08', '2016.11.06', '2017.05.07', '2017.11.05', '2018.05.06', '2018.11.04', '2019.05.05', '2019.11.03', '2020.05.03', '2020.11.01', '2021.05.02'],
          datasets: [{
            label: "Search interest",
            fill: true,
            data: [0.0, 0.65, 0.3, 0.6, 2.7, 6.2, 16.3, 23.65, 53.45, 43.75, 59.27272727272727],
            borderColor: 'rgba(55,48,163,0.8)',
            backgroundColor: 'rgba(55,48,163,0.5)',
            pointHoverRadius: 10
          }]
        },

        options: {
          animation: {
            duration: 0
          },
          plugins: {
            legend: {
              display: false,
              positon: "bottom"
            },
            deferred: {

            }
          },
          elements: {
            point: {
              radius: 2
            }
          },

          scales: {
            y: {
              beginAtZero: true,
              display: false,
              max: 100
            },
            x: {
              display: false,
              position: "bottom"
            }
          }
        }
      });
    </script>
  </div>
  <div class="mx-auto max-w-md">
    <canvas id="B" width="400" height="400"></canvas>
  </div>
  <script>
    var ctx = document.getElementById("B").getContext('2d');
    var myChart = new Chart(ctx, {
      type: 'line',
      data: {

        labels: ['2016.05.08', '2016.11.06', '2017.05.07', '2017.11.05', '2018.05.06', '2018.11.04', '2019.05.05', '2019.11.03', '2020.05.03', '2020.11.01', '2021.05.02'],
        datasets: [{
          label: "Search interest",
          fill: true,
          data: [0.0, 0.65, 0.3, 0.6, 2.7, 6.2, 16.3, 23.65, 53.45, 43.75, 59.27272727272727],
          borderColor: 'rgba(55,48,163,0.8)',
          backgroundColor: 'rgba(55,48,163,0.5)',
          pointHoverRadius: 10
        }]
      },

      options: {

        plugins: {
          legend: {
            display: false,
            positon: "bottom"
          },
          deferred: {

          }
        },
        elements: {
          point: {
            radius: 2
          }
        },

        scales: {
          y: {
            beginAtZero: true,
            display: false,
            max: 100
          },
          x: {
            display: false,
            position: "bottom"
          }
        }
      }
    });
  </script>

  <div class="mx-auto max-w-md">
    <canvas id="C" width="400" height="400"></canvas>
  </div>
  <script>
    var ctx = document.getElementById("C").getContext('2d');
    var myChart = new Chart(ctx, {
      type: 'line',
      data: {

        labels: ['2016.05.08', '2016.11.06', '2017.05.07', '2017.11.05', '2018.05.06', '2018.11.04', '2019.05.05', '2019.11.03', '2020.05.03', '2020.11.01', '2021.05.02'],
        datasets: [{
          label: "Search interest",
          fill: true,
          data: [0.0, 0.65, 0.3, 0.6, 2.7, 6.2, 16.3, 23.65, 53.45, 43.75, 59.27272727272727],
          borderColor: 'rgba(55,48,163,0.8)',
          backgroundColor: 'rgba(55,48,163,0.5)',
          pointHoverRadius: 10
        }]
      },

      options: {

        plugins: {
          legend: {
            display: false,
            positon: "bottom"
          },
          deferred: {

          }
        },
        elements: {
          point: {
            radius: 2
          }
        },

        scales: {
          y: {
            beginAtZero: true,
            display: false,
            max: 100
          },
          x: {
            display: false,
            position: "bottom"
          }
        }
      }
    });
  </script>

  <div class="mx-auto max-w-md">
    <canvas id="D" width="400" height="400"></canvas>
  </div>
  <script>
    var ctx = document.getElementById("D").getContext('2d');
    var myChart = new Chart(ctx, {
      type: 'line',
      data: {

        labels: ['2016.05.08', '2016.11.06', '2017.05.07', '2017.11.05', '2018.05.06', '2018.11.04', '2019.05.05', '2019.11.03', '2020.05.03', '2020.11.01', '2021.05.02'],
        datasets: [{
          label: "Search interest",
          fill: true,
          data: [0.0, 0.65, 0.3, 0.6, 2.7, 6.2, 16.3, 23.65, 53.45, 43.75, 59.27272727272727],
          borderColor: 'rgba(55,48,163,0.8)',
          backgroundColor: 'rgba(55,48,163,0.5)',
          pointHoverRadius: 10
        }]
      },

      options: {

        plugins: {
          legend: {
            display: false,
            positon: "bottom"
          },
          deferred: {

          }
        },
        elements: {
          point: {
            radius: 2
          }
        },

        scales: {
          y: {
            beginAtZero: true,
            display: false,
            max: 100
          },
          x: {
            display: false,
            position: "bottom"
          }
        }
      }
    });
  </script>

</body>

编辑：

随着延迟插件版本2的发布，它与chart.js V3兼容

赞(0）回复(0）举报 2022-11-06

我来回答

Chartjs插件延迟抛出“未捕获的类型错误：无法读取未定义的属性'plugins'”错误

1条答案

相关问题

热门标签

最新问答