如何让chart.js根据x，y数据集自动构建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

使用chart.js 2.x，可以使用数据的传递x和y属性功能实现此功能。

这是摘自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>