javascript - 示例：甜甜圈 | 错误：未捕获的 ReferenceError：未定义 Utils

问题描述

不幸的是，我在这个例子中失败了。我包括以下脚本：

 <script src="https://code.jquery.com/jquery-3.6.0.min.js"  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/chart.js@3.2.0/dist/helpers.esm.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.2.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.2.0/dist/chart.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/chart.js@3.2.0/dist/chart.esm.min.js"></script>

这是我的功能（它是示例方面的副本） https://www.chartjs.org/docs/3.2.0/samples/other-charts/doughnut.html

function donutchart(){

    //-----SETUP-------
    const DATA_COUNT = 5;
    const NUMBER_CFG = {count: DATA_COUNT, min: 0, max: 100};

    const data = {
    labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue'],
    datasets: [
        {
        label: 'Dataset 1',
        data: Utils.numbers(NUMBER_CFG),
        backgroundColor: Object.values(Utils.CHART_COLORS),
        }
    ]
    };

    //-----Config----------
    const config = {
        type: 'doughnut',
        data: data,
        options: {
          responsive: true,
          plugins: {
            legend: {
              position: 'top',
            },
            title: {
              display: true,
              text: 'Chart.js Doughnut Chart'
            }
          }
        },
      };

      //-------Actions--------
      const actions = [
        {
          name: 'Randomize',
          handler(chart) {
            chart.data.datasets.forEach(dataset => {
              dataset.data = Utils.numbers({count: chart.data.labels.length, min: 0, max: 100});
            });
            chart.update();
          }
        },
        {
          name: 'Add Dataset',
          handler(chart) {
            const data = chart.data;
            const newDataset = {
              label: 'Dataset ' + (data.datasets.length + 1),
              backgroundColor: [],
              data: [],
            };
      
            for (let i = 0; i < data.labels.length; i++) {
              newDataset.data.push(Utils.numbers({count: 1, min: 0, max: 100}));
      
              const colorIndex = i % Object.keys(Utils.CHART_COLORS).length;
              newDataset.backgroundColor.push(Object.values(Utils.CHART_COLORS)[colorIndex]);
            }
      
            chart.data.datasets.push(newDataset);
            chart.update();
          }
        },
        {
          name: 'Add Data',
          handler(chart) {
            const data = chart.data;
            if (data.datasets.length > 0) {
              data.labels.push('data #' + (data.labels.length + 1));
      
              for (var index = 0; index < data.datasets.length; ++index) {
                data.datasets[index].data.push(Utils.rand(0, 100));
              }
      
              chart.update();
            }
          }
        },
        {
          name: 'Remove Dataset',
          handler(chart) {
            chart.data.datasets.pop();
            chart.update();
          }
        },
        {
          name: 'Remove Data',
          handler(chart) {
            chart.data.labels.splice(-1, 1); // remove the label first
      
            chart.data.datasets.forEach(dataset => {
              dataset.data.pop();
            });
      
            chart.update();
          }
        }
      ];

      // === include 'setup' then 'config' above ===
    
      var myChart = new Chart(
        document.getElementById('Quota'),
        config
      );
}

如果我运行脚本，我会收到以下错误消息： Uncaught ReferenceError: Utils is not defined

现在我一直在寻找一两天什么是“utils”以及如何整合它

请帮我！谢谢托马斯

标签： javascriptchart.js

javascript - 示例：甜甜圈 | 错误：未捕获的 ReferenceError：未定义 Utils

问题描述

解决方案

推荐阅读