如何在 chart.js 中绘制直方图的高斯曲线？

Question

我用高斯曲线创建直方图，但跳过了曲线的第一个数据点。

我的例子：

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
    labels: [0,1,2,3,4,5,6,7,8,
            9,10,11,12,13,14,15],
    datasets: [{
        borderWidth: 1,
        backgroundColor: 'rgba(255, 99,                               132,0.5)',
        borderColor: 'rgb(255, 99, 132)',
        data: [3,1,0,0,0,2,0
              ,2,0,2,0,0,0,0,0,0]
    },{
      type: 'line',
      fill: false,
      borderWidth: 1,
      data: [
{
"x": 0.4175611241375584,
"y": 0
},
{
...other points
}
],
      borderColor: 'rgb(54, 162, 235)',
      radius: 2
    }]
},
options: {
    scales: {
        yAxes: [{
           categoryPercentage : 1,
           barPercentage: 1
        }],
        xAxes: [{
          type: 'linear',
          position: 'bottom',
          ticks: {
            stepSize: 1,
            min: 0,
            max: 4
          }
        }]
    }
}
});

https://codepen.io/krna/pen/ejzqwg

当我只画高斯曲线时，所有的点都画对了。

直方图的反转没有帮助。

我在数据和图表轴配置方面尝试了很多奇怪的技巧，但都没有成功。

Answer 1

问题出在 y 轴上的 0 值，它可能被解释为 null 而不是 0。不过，您可以通过将标签和 y 值设为字符串来实现此目的。完整答案您可以在 https://github.com/chartjs/Chart.js/issues/5641.

上找到

如何在 chart.js 中绘制直方图的高斯曲线？

How to plot a gaussian curve over histogram in chart.js?

gaussian

histogram