Javascript Chart.js中的Utils包

我试图从chart.js文档中复制这个示例：

但我一直在犯这样的错误：

未捕获引用错误：未定义Utils

我尝试在Chart.js文档中搜索“Utils”，但没有成功。 你知道我怎样才能正确使用它吗？我显然缺少一些基本的东西。

我在
下面是代码示例中提到的Utils文件的链接。
将此文件添加到您的项目中，它现在应该可以工作了

如果将来链接断开，则添加提到的Utils代码

import colorLib from '@kurkle/color';
import {DateTime} from 'luxon';
import 'chartjs-adapter-luxon';
import {valueOrDefault} from '../../dist/helpers.esm';

// Adapted from http://indiegamr.com/generate-repeatable-random-numbers-in-js/
var _seed = Date.now();

export function srand(seed) {
  _seed = seed;
}

export function rand(min, max) {
  min = valueOrDefault(min, 0);
  max = valueOrDefault(max, 0);
  _seed = (_seed * 9301 + 49297) % 233280;
  return min + (_seed / 233280) * (max - min);
}

export function numbers(config) {
  var cfg = config || {};
  var min = valueOrDefault(cfg.min, 0);
  var max = valueOrDefault(cfg.max, 100);
  var from = valueOrDefault(cfg.from, []);
  var count = valueOrDefault(cfg.count, 8);
  var decimals = valueOrDefault(cfg.decimals, 8);
  var continuity = valueOrDefault(cfg.continuity, 1);
  var dfactor = Math.pow(10, decimals) || 0;
  var data = [];
  var i, value;

  for (i = 0; i < count; ++i) {
    value = (from[i] || 0) + this.rand(min, max);
    if (this.rand() <= continuity) {
      data.push(Math.round(dfactor * value) / dfactor);
    } else {
      data.push(null);
    }
  }

  return data;
}

export function points(config) {
  const xs = this.numbers(config);
  const ys = this.numbers(config);
  return xs.map((x, i) => ({x, y: ys[i]}));
}

export function bubbles(config) {
  return this.points(config).map(pt => {
    pt.r = this.rand(config.rmin, config.rmax);
    return pt;
  });
}

export function labels(config) {
  var cfg = config || {};
  var min = cfg.min || 0;
  var max = cfg.max || 100;
  var count = cfg.count || 8;
  var step = (max - min) / count;
  var decimals = cfg.decimals || 8;
  var dfactor = Math.pow(10, decimals) || 0;
  var prefix = cfg.prefix || '';
  var values = [];
  var i;

  for (i = min; i < max; i += step) {
    values.push(prefix + Math.round(dfactor * i) / dfactor);
  }

  return values;
}

const MONTHS = [
  'January',
  'February',
  'March',
  'April',
  'May',
  'June',
  'July',
  'August',
  'September',
  'October',
  'November',
  'December'
];

export function months(config) {
  var cfg = config || {};
  var count = cfg.count || 12;
  var section = cfg.section;
  var values = [];
  var i, value;

  for (i = 0; i < count; ++i) {
    value = MONTHS[Math.ceil(i) % 12];
    values.push(value.substring(0, section));
  }

  return values;
}

const COLORS = [
  '#4dc9f6',
  '#f67019',
  '#f53794',
  '#537bc4',
  '#acc236',
  '#166a8f',
  '#00a950',
  '#58595b',
  '#8549ba'
];

export function color(index) {
  return COLORS[index % COLORS.length];
}

export function transparentize(value, opacity) {
  var alpha = opacity === undefined ? 0.5 : 1 - opacity;
  return colorLib(value).alpha(alpha).rgbString();
}

export const CHART_COLORS = {
  red: 'rgb(255, 99, 132)',
  orange: 'rgb(255, 159, 64)',
  yellow: 'rgb(255, 205, 86)',
  green: 'rgb(75, 192, 192)',
  blue: 'rgb(54, 162, 235)',
  purple: 'rgb(153, 102, 255)',
  grey: 'rgb(201, 203, 207)'
};

const NAMED_COLORS = [
  CHART_COLORS.red,
  CHART_COLORS.orange,
  CHART_COLORS.yellow,
  CHART_COLORS.green,
  CHART_COLORS.blue,
  CHART_COLORS.purple,
  CHART_COLORS.grey,
];

export function namedColor(index) {
  return NAMED_COLORS[index % NAMED_COLORS.length];
}

export function newDate(days) {
  return DateTime.now().plus({days}).toJSDate();
}

export function newDateString(days) {
  return DateTime.now().plus({days}).toISO();
}

export function parseISODate(str) {
  return DateTime.fromISO(str);
}

从“@kurkle/color”导入colorLib；
从'luxon'导入{DateTime}；
导入“chartjs适配器luxon”；
从“../../dist/helpers.esm”导入{valueOrDefault}；
//改编自http://indiegamr.com/generate-repeatable-random-numbers-in-js/
var_seed=Date.now（）；
导出函数srand（seed）{
_种子=种子；
}
导出函数rand（最小值、最大值）{
最小值=值默认值（最小值，0）；
最大值=值默认值（最大值，0）；
_种子=（_seed*9301+49297）%233280；
返回最小值+（_seed/233280）*（最大值-最小值）；
}
导出函数编号（配置）{
var cfg=config | |{}；
var min=值默认值（cfg.min，0）；
var max=值默认值（cfg.max，100）；
var from=ValuerDefault（cfg.from，[]）；
var count=valueOrDefault（cfg.count，8）；
var小数=ValuerDefault（cfg.decimals，8）；
var连续性=值默认值（cfg.continuity，1）；
var dfactor=Math.pow（10，小数）| 0；
var数据=[]；
var i，价值；
对于（i=0；i{
pt.r=this.rand（config.rmin，config.rmax）；
返回pt；
});
}
导出函数标签（配置）{
var cfg=config | |{}；
var min=cfg.min | 0；
var max=cfg.max | | 100；
var count=cfg.count | | 8；
变量步长=（最大-最小）/计数；
var小数=cfg.decimals | | 8；
var dfactor=Math.pow（10，小数）| 0；
var prefix=cfg.prefix | |“”；
var值=[]；
var i；
对于（i=min；i

Hello jms bid。我也有同样的问题（我想）。为了确保正确回答您的问题，您能否将您的html文件放在StackOverflow上（而不仅仅是参考您将尝试的内容）你能记录下你的代码中发生错误的地方吗？谢谢。嗨@schlebe！我的代码是我链接的参考的1:1副本，所以不需要添加任何其他内容。下面接受的答案解决了这个问题。抱歉，但是ChartJs上的HTML文件是一个完整的页面，其中包含的内容超过了你想要测试的内容（我想）。那么你能把你的html代码放进去吗？事实上已经存在一个解决方案，这还不足以给出一个更好的解决方案！请给出你的代码，或者最好创建一个被剪掉的代码！

这就是所有的html人……当chartjs页面被替换或删除时会发生什么？没有人会理解你的问题。这是一个好的行为n StackOverflow可以避免超链接并花一些时间来编写完整的问题，而不仅仅是使用链接，因为它对您来说很简单。