是否可以爲折線圖繪製十進制X軸？

Question

https://jsfiddle.net/8Loj8vbo/2/

這裏的圖表的javascript：

$(document).ready(function() { 

    var ctx = document.getElementById("rpm2-graph") 
    var rpm2Chart = new Chart(ctx, { 
    type: "line", 
    options: { 
     maintainAspectRatio: false 
    }, 
    data: { 
     datasets: [{ 
     "label": "RPM", 
     "data": [{ 
      "x": 182.843, 
      "y": 5988.867 
     }, { 
      "x": 182.852, 
      "y": 5993.022 
     }, { 
      "x": 182.863, 
      "y": 5992.126 
     }, { 
      "x": 182.873, 
      "y": 5994.637 
     }, { 
      "x": 182.882, 
      "y": 5998.02 
     }, { 
      "x": 182.893, 
      "y": 6000.957 
     }, { 
      "x": 182.903, 
      "y": 6003.547 
     }, { 
      "x": 182.912, 
      "y": 6006.355 
     }, { 
      "x": 182.923, 
      "y": 6011.133 
     }] 
     }] 
    } 
    }); 
}); 

有在該組9個數據點，但是圖僅示出了前兩個。它看起來不是一個規模問題，因爲畫布的寬度看起來合適。

它似乎只是Chart不願意畫出額外的點，我不知道爲什麼。是否可能是因爲x值不是整數？

我的x軸是時間數據（例如：秒和幾分之一秒）。

Answer 1

線圖表不完全支持x軸的數值。您應該使用分散圖表。

這裏是例子：

$(document).ready(function() { 
 
    var ctx = document.getElementById("rpm2-graph") 
 
    var rpm2Chart = new Chart(ctx, { 
 
     type: "scatter", 
 
     options: { 
 
     maintainAspectRatio: false 
 
     }, 
 
     data: { 
 
     datasets: [{ 
 
      "label": "RPM", 
 
      "data": [{ 
 
       "x": 182.843, 
 
       "y": 5988.867 
 
      }, { 
 
       "x": 182.852, 
 
       "y": 5993.022 
 
      }, { 
 
       "x": 182.863, 
 
       "y": 5992.126 
 
      }, { 
 
       "x": 182.873, 
 
       "y": 5994.637 
 
      }, { 
 
       "x": 182.882, 
 
       "y": 5998.02 
 
      }, { 
 
       "x": 182.893, 
 
       "y": 6000.957 
 
      }, { 
 
       "x": 182.903, 
 
       "y": 6003.547 
 
      }, { 
 
       "x": 182.912, 
 
       "y": 6006.355 
 
      }, { 
 
       "x": 182.923, 
 
       "y": 6011.133 
 
      }] 
 
     }] 
 
     } 
 
    }); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="line-graph"> 
 
    <canvas id="rpm2-graph" height="400"></canvas> 
 
</div>

參考here更多地瞭解散點圖。