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]);
2条答案
按热度按时间ffscu2ro1#
不幸的是,
Chart.js
不可能这样做,除非您自己创建它。但是,我发现了一个名为
ChartNew.js
(Github)的库,它提供了Chart.js上没有的许多功能:自从开发ChartNew.js以来,Chart.js已被完全重写;这两个代码现在完全不同了。
而这个库提供了一个Gaussian Function(也叫正态分布):
要做到这一点,看看Github中给出的the sample。
如果你改变一些数据,我相信它会适合你的。
vzgqcmou2#
此实现是使用React完成的。下面的函数仍然可以在基于Javascript的其他编程语言中使用。
绘制正态分布曲线所需的唯一两个输入是平均值和标准差
定义平均值和标准差的状态以及X和Y数组的状态
Get X值为钟形曲线(如果不使用react可以去掉useEffect)
Get Y值为Bell曲线(如果不使用react可以去掉useEffect)
X和Y的数组可以按原样提供给图表的标签和数据属性。