x、yデータセットに基づいてchart.jsが自動的にx軸ラベルを作成する方法は？

Question

chart.jsに、X、Yデータセットに最適なラベルの範囲を自動的に表示する方法はありますか？

が、私は単純なデータセットを持って、ゼロベースが、不等間隔のデータと、ALA：

0.0, 7.0 
0.5, 8.0 
1.2, 9.0 
... 
49.9 213.0 

chart.jsにこのデータセットを渡すと、それが正しいことや計算を行うている方法はあります、たとえば、0から50.0までの10個のラベルがあり、線で結ばれたすべてのデータポイントを表示しますか？

Answer 1

これは、x属性とy属性をデータに渡す機能を使用して、chart.js 2.xでそのまま使用することができます。ここで

がchart.js例

var randomScalingFactor = function() { 
 
    return Math.round(Math.random() * 10); 
 
}; 
 
var randomColor = function(opacity) { 
 
    return 'rgba(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + (opacity || '.3') + ')'; 
 
}; 
 

 
var scatterChartData = { 
 
    datasets: [{ 
 
    label: "My First dataset", 
 
    data: [{ 
 
     x: 0.4, 
 
     y: randomScalingFactor(), 
 
    }, { 
 
     x: 1.6, 
 
     y: randomScalingFactor(), 
 
    }, { 
 
     x: 4.7, 
 
     y: randomScalingFactor(), 
 
    }, { 
 
     x: 9.2, 
 
     y: randomScalingFactor(), 
 
    }, { 
 
     x: 20.1, 
 
     y: randomScalingFactor(), 
 
    }, { 
 
     x: 44.5, 
 
     y: randomScalingFactor(), 
 
    }, { 
 
     x: 155.3, 
 
     y: randomScalingFactor(), 
 
    }] 
 
    }] 
 
}; 
 

 
$.each(scatterChartData.datasets, function(i, dataset) { 
 
    dataset.borderColor = randomColor(0.4); 
 
    dataset.backgroundColor = randomColor(0.1); 
 
    dataset.pointBorderColor = randomColor(0.7); 
 
    dataset.pointBackgroundColor = randomColor(0.5); 
 
    dataset.pointBorderWidth = 1; 
 
}); 
 

 
window.onload = function() { 
 
    var ctx = document.getElementById("canvas").getContext("2d"); 
 
    window.myScatter = Chart.Scatter(ctx, { 
 
    data: scatterChartData, 
 
    options: { 
 
     title: { 
 
     display: true, 
 
     text: 'Chart.js Scatter Chart' 
 
     }, 
 
     scales: { 
 
     xAxes: [{ 
 
      position: 'bottom', 
 
      gridLines: { 
 
      zeroLineColor: "rgba(0,255,0,1)" 
 
      }, 
 
      scaleLabel: { 
 
      display: true, 
 
      labelString: 'x axis' 
 
      } 
 
     }], 
 
     yAxes: [{ 
 
      position: 'left', 
 
      gridLines: { 
 
      zeroLineColor: "rgba(0,255,0,1)" 
 
      }, 
 
      scaleLabel: { 
 
      display: true, 
 
      labelString: 'y axis' 
 
      } 
 
     }] 
 
     } 
 
    } 
 
    }); 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.js"></script> 
 
<div style="width:75%"> 
 
    <div> 
 
    <canvas id="canvas"></canvas> 
 
    </div> 
 
</div>