Wie erstellt chart.js automatisch X-Achsen-Labels basierend auf x, y-Datensätzen?

Question

Gibt es eine Möglichkeit, dass chart.js automatisch den Bereich der Beschriftungen anzeigt, die am besten zu X und Y passen?

Ich habe eine einfache Datenmenge, die Null-basiert ist, aber mit ungleich beabstandeten Daten, ala:

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

Gibt es eine Möglichkeit, diese Datenmenge in chart.js passieren und es hat, das Richtige und Rechen zu tun, Sagen wir, 10 Etiketten von 0 -> 50.0 und zeigen alle Datenpunkte an, die durch eine Linie verbunden sind?

Answer 1

Dies ist out of the box mit chart.js 2.x mit der Fähigkeit möglich, x und y Attribute mit den Daten zu übergeben.

Hier ist ein exmaple aus den chart.js genommen Beispiele

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>