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

【问题标题】：How to plot a gaussian curve over histogram in chart.js?如何在chart.js中的直方图上绘制高斯曲线？
【发布时间】：2018-07-23 15:29:19
【问题描述】：

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

我的例子：

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

当我只画高斯曲线时，所有点都正确绘制。

直方图的反转没有帮助。

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

【问题讨论】：

标签： histogram gaussian

【解决方案1】：

问题在于 y 轴上的 0 值，它可能被解释为 null 而不是 0。但是，您可以通过将标签和 y 值设为字符串来完成这项工作。完整答案您可以在https://github.com/chartjs/Chart.js/issues/5641 上找到。

【讨论】：