是否可以为折线图绘制十进制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更多地了解散点图。