ChartJS Skalenstriche mit Streudiagramm

Question

Ich beginne gerade mit ChartJS. Ich untersuche das neue Streudiagramm in Version 2.6 und möchte den Ursprung eines X-Y-Plots bei 0: 0 beginnen. Ich möchte auch den Maximalwert von X und Y angeben.

Leider scheint das Setzen von beginAtZero auf True und das Setzen eines Maximalwerts für jede Achse nicht zu funktionieren. Beispielcode unten:

var linedata = { 
    type: 'scatter', 
    data: { 
     datasets: [{ 
       label: 'Simple Line', 
       fill: false, 
       data: [ 
        {x: 1, y: 2}, 
        {x: 2, y: 4}, 
        {x: 3, y: 6}, 
        {x: 4, y: 8}, 
        {x: 5, y: 10}, 
        {x: 6, y: 12}, 
        {x: 7, y: 14} 
       ] 
      } 
     ] 
    } 
    }; 

    var chartOptions = { 
     responsive: true, 
     maintainAspectRatio: true, 
     scales: { 
      xAxes: [{ 
        ticks: { 
         beginAtZero: true, 
         max: 8 
        }, 
        type: 'linear', 
        position: 'bottom' 
       }], 
      yAxes: [{ 
        ticks: { 
         beginAtZero: true, 
         max: 16 
        } 
       }] 
     } 
    }; 

var lineID = document.getElementById('linechart').getContext('2d'); 
var lineChart = new Chart(lineID, linedata, chartOptions); 

Diese noch endet mit einer Linie (Streudiagramm) nach oben bei X beginnend = 1, Y = 2 ist, und endend mit X = 7 ist, Y = 14 (statt 0: 0 bis 8 : 16).

Answer 1

Sie konfigurieren Ihr Diagramm falsch. Hier ist, wie es erstellt werden soll ...

var linedata = { 
 
    datasets: [{ 
 
     label: 'Simple Line', 
 
     fill: false, 
 
     data: [ 
 
     {x: 1, y: 2}, 
 
     {x: 2, y: 4}, 
 
     {x: 3, y: 6}, 
 
     {x: 4, y: 8}, 
 
     {x: 5, y: 10}, 
 
     {x: 6, y: 12}, 
 
     {x: 7, y: 14} 
 
     ] 
 
    }] 
 
}; 
 

 
var chartOptions = { 
 
    responsive: true, 
 
    maintainAspectRatio: true, 
 
    scales: { 
 
     xAxes: [{ 
 
     ticks: { 
 
      beginAtZero: true, 
 
      max: 8 
 
     }, 
 
     type: 'linear', 
 
     position: 'bottom' 
 
     }], 
 
     yAxes: [{ 
 
     ticks: { 
 
      beginAtZero: true, 
 
      max: 16 
 
     } 
 
     }] 
 
    } 
 
}; 
 

 
var lineID = document.getElementById('linechart').getContext('2d'); 
 
var lineChart = new Chart(lineID, { 
 
    type: 'scatter', 
 
    data: linedata, 
 
    options: chartOptions 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> 
 
<canvas id="linechart"></canvas>