javascript - 示例 : Doughnut | Error: Uncaught ReferenceError: Utils is not defined

Question

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

 <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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9dfff2f2e9eee9effceddda9b3abb3ad" rel="noreferrer noopener nofollow">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="88ebe0e9fafca6e2fbc8bba6baa6b8" rel="noreferrer noopener nofollow">[email protected]</a>/dist/helpers.esm.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="94f7fcf5e6e0bafee7d4a7baa6baa4" rel="noreferrer noopener nofollow">[email protected]</a>/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="88ebe0e9fafca6e2fbc8bba6baa6b8" rel="noreferrer noopener nofollow">[email protected]</a>/dist/chart.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="45262d2437316b2f3605766b776b75" rel="noreferrer noopener nofollow">[email protected]</a>/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

现在我已经花了一两天时间寻找“utils”是什么以及如何集成它

请帮助我!谢谢托马斯

Answer 1

Utils是chart.js在内部使用和生成的一个辅助文件，用于生成数据集和其他一些东西，它在chart.js版本3中作为公共(public)源被删除，如果你想使用它，你可以在这里下载:( https://github.com/chartjs/Chart.js/blob/master/docs/scripts/utils.js ) 或在此处获取在线文件:( https://www.chartjs.org/samples/2.9.4/utils.js )

如果您想要一个好的起点/示例，您可以从使用页面复制代码，这里有基本图表的图表代码，您不需要任何其他内容: https://www.chartjs.org/docs/master/getting-started/usage.html