javascript - 折线图是否可以有十进制 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 个数据点，但图表仅显示前两个。这似乎不是比例问题，因为 Canvas 的宽度看起来合适。

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了解有关散点图的更多信息。