Question

这是图表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轴的数值。您应该使用分散图表。

以下是示例：

＆＃13;

$(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
            }]
         }]
      }
   });
});

＆＃13;

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

＆＃13;

请参阅here以了解有关散点图的更多信息。

是否可以为折线图设置十进制X轴？

1 个答案: