时间戳

首页 > 解决方案 > 如何在chart.js中在直方图上绘制高斯曲线？

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

问题描述

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

我的例子：

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

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

直方图的反转没有帮助。

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

标签： histogramgaussian

解决方案

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

推荐阅读