使用Chart.js创建正态分布图

x759pob2  于 2022-11-29  发布在  Chart.js
关注(0)|答案(2)|浏览(365)

我的任务是实现一个正态分布图。我想知道Chart.js是否提供了这个功能,或者我是否需要扩展它。
谢谢你

ffscu2ro

ffscu2ro1#

不幸的是,Chart.js不可能这样做,除非您自己创建它。
但是,我发现了一个名为ChartNew.jsGithub)的库,它提供了Chart.js上没有的许多功能:
自从开发ChartNew.js以来,Chart.js已被完全重写;这两个代码现在完全不同了。
而这个库提供了一个Gaussian Function(也叫正态分布):

要做到这一点,看看Github中给出的the sample
如果你改变一些数据,我相信它会适合你的。

vzgqcmou

vzgqcmou2#

此实现是使用React完成的。下面的函数仍然可以在基于Javascript的其他编程语言中使用。

绘制正态分布曲线所需的唯一两个输入是平均值和标准差

定义平均值和标准差的状态以及X和Y数组的状态

const [bellMean, setBellMean] = useState<number>(12.2036); //example
const [bellStdev, setBellStdev] = useState<number>(0.0008); //example
const [bellXValues, setBellXValues] = useState<(number)[]>([]);
const [bellYValues, setBellYValues] = useState<(number | null)[]>([]);

Get X值为钟形曲线(如果不使用react可以去掉useEffect)

useEffect(() => {
  // defining chart limits between which the graph will be plotted
  let lcl = bellMean - bellStdev * 6;
  let ucl = bellMean + bellStdev * 6;

  let ticks = [lcl];
  let steps = 100; // steps corresponds to the size of the output array
  let stepSize = Math.round(((ucl - lcl) / steps) * 10000) / 10000;
  let tickVal = lcl;
  for (let i = 0; i <= steps; i++) {
    ticks.push(Math.round(tickVal * 10000) / 10000); // rounding off to 4 decimal places
    tickVal = tickVal + stepSize;
  }
  setBellXValues(ticks); //array for X values
}, [bellMean, bellStdev]);

Get Y值为Bell曲线(如果不使用react可以去掉useEffect)

useEffect(() => {
  // Using PDF function from vega-statistics instead of importing the whole library
  const densityNormal = (value: number, mean: number, stdev: number) => {
  const SQRT2PI = Math.sqrt(2 * Math.PI);
  stdev = (stdev == null) ? 1 : stdev;
  const z = (value - (mean || 0)) / stdev;
  return Math.exp(-0.5 * z * z) / (stdev * SQRT2PI);
};

let YValues = bellXValues.map((item: number) => {
  if (bellMean === null || bellStdev === undefined) {
    return null;
  } else {
    const pdfValue = densityNormal(item, bellMean, bellStdev);
    return pdfValue === Infinity ? null : pdfValue;
  }
});
setBellYValues(YValues); // array for Y values
}, [bellXValues]);

X和Y的数组可以按原样提供给图表的标签和数据属性。

相关问题