ChartJS Y 軸刻度值錯誤

Question

我有一個圖表，y 軸刻度似乎是錯誤的。

這是輸入的數據。

data: {
        labels: [1, 2, 3, 4, 5, 6],
        datasets: [
                     {
                        label: '911',
                        lineTension: 0,
                        fill: false,
                        borderColor: '#4cfbb3', // (random) 
                        data: [ 10381, 11381, 19381, 19381, 2381 ]
                     }
                  ]
      }

圖表：

如您所見，第 1 天的數據應該分別繪制在 10k 左右，在圖表上它剛好高於 6k。 此外，最高值是 19381，它甚至出現了兩次，並且在圖表上顯示最高值正好在 12k。

我無法准確設置硬編碼的比例，因為這個數據比例一直在變化。 這是 json 的其余部分：

{
      type:'line',
      data:{
        labels:[],
        datasets:[]
      },
      options:{
        legend: {
          display: true,
          position: 'top',
          fontColor: 'white',
          fontSize: 20,
          labels: {
            fontColor: 'white',
            fontSize: 20
          }
        },
        responsive: true,
        scales: {
          yAxes: [{
            stacked: false,
            scaleLabel: {
              display: true,
              fontColor: 'white',
              fontSize: 25,
              labelString: 'Faction Points'
            },
            ticks: {
              fontColor: 'white',
              fontSize: 20,
              min: 0
            }
          }],
        xAxes: [{
          stacked: false,
          scaleLabel: {
            display: true,
            fontColor: 'white',
            fontSize: 25,
            labelString: 'Day'
          },
          ticks: {
            fontColor: 'white',
            fontSize: 20,
            min: 0
          }
        }]
        }
      }
    }

任何有關如何解決此問題的幫助將不勝感激，謝謝！

Answer 1

鑒於您的代碼，我只是添加了更改yAxis.gridLines的color以更好地可視化不同點的確切位置。 對我來說，這看起來不錯。 還請發布您的 CSS 定義。

yAxes: [{
  ...
  gridLines: {
    color: 'white'
  }

 new Chart("scurve_chart", { type: 'line', data: { labels: [1, 2, 3, 4, 5, 6], datasets: [{ label: '911', lineTension: 0, fill: false, borderColor: '#4cfbb3', // (random) data: [10381, 11381, 19381, 19381, 2381] }] }, options: { legend: { display: true, position: 'top', fontColor: 'white', fontSize: 20, labels: { fontColor: 'white', fontSize: 20 } }, responsive: true, scales: { yAxes: [{ stacked: false, scaleLabel: { display: true, fontColor: 'white', fontSize: 25, labelString: 'Faction Points' }, ticks: { fontColor: 'white', fontSize: 20, min: 0 }, gridLines: { color: 'white' } }], xAxes: [{ stacked: false, scaleLabel: { display: true, fontColor: 'white', fontSize: 25, labelString: 'Day' }, ticks: { fontColor: 'white', fontSize: 20, min: 0 } }] } } });

 div { background-color: black; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script> <div> <canvas id="scurve_chart"></canvas> </div>