散布図を使用したChartJS目盛り

Question

私はChartJSから始めています。私はバージョン2.6で新しい散布図を探求しており、X-Yプロットの起点を0：0で開始したいと考えています。

残念ながら、beginAtZeroをtrueに設定し、各軸の最大値を設定しても動作しないようです。以下のサンプルコード：

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); 

これは依然としてライン（散布​​図）で終わるX = 1、Y = 2で開始し、X = 7、Y = 14（よりむしろ0で終了：0〜8 16）。

Answer 1

グラフを正しく構成していません。ここで

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>