ChartJS - 只有1点的折线图问题

Question

当我想使用折线图显示1个单点时，我发现了这个小错误..我不知道为什么它没有表明这一点。这是截图：

以下是我创建对象的方法：

avg_payment = {
    labels: ["Jan"]
    datasets: [
        {
            label: "Average_payment"
            fillColor: "rgba(220,220,220,0.5)"
            strokeColor: "rgba(220,220,220,0.8)"
            highlightFill: "rgba(220,220,220,0.75)"
            highlightStroke: "rgba(220,220,220,1)"
            data: [65]
        }
    ]
}

这是我目前的解决方法，虽然它仍然给我相同的结果：

if avg_payment.labels.length is 1
    max_val = Math.max(avg_payment.datasets[0].data)
    opt = {
      scaleOverride : true
      scaleSteps : 2
      scaleStepWidth : 1
      scaleStartValue : max_val - 1
    }
    myLineChart = new Chart(ctx1).Line(avg_payment, opt)

此问题是否有解决方法？

Answer 1

这个问题是由于当chartjs试图绘制x轴时变量变为无穷大引起的。对此的修复必须进入Chartjs规模的核心，因此您可以扩展如下所示的扩展，或者我已将此修复添加到我的自定义构建的chartjs https://github.com/leighquince/Chart.js

＆＃13;

＆＃13;

Chart.Scale = Chart.Scale.extend({
  calculateX: function(index) {
    //check to ensure data is in chart otherwise we will get infinity
    if (!(this.valuesCount)) {
      return 0;
    }
    var isRotated = (this.xLabelRotation > 0),
      // innerWidth = (this.offsetGridLines) ? this.width - offsetLeft - this.padding : this.width - (offsetLeft + halfLabelWidth * 2) - this.padding,
      innerWidth = this.width - (this.xScalePaddingLeft + this.xScalePaddingRight),
      //if we only have one data point take nothing off the count otherwise we get infinity
      valueWidth = innerWidth / (this.valuesCount - ((this.offsetGridLines) || this.valuesCount === 1 ? 0 : 1)),
      valueOffset = (valueWidth * index) + this.xScalePaddingLeft;

    if (this.offsetGridLines) {
      valueOffset += (valueWidth / 2);
    }

    return Math.round(valueOffset);
  },
});
var line_chart_data = {
  labels: ["Jan"],
  datasets: [{
    label: "Average_payment",
    fillColor: "rgba(220,220,220,0.5)",
    strokeColor: "rgba(220,220,220,0.8)",
    highlightFill: "rgba(220,220,220,0.75)",
    highlightStroke: "rgba(220,220,220,1)",
    data: [65]
  }]
};


var ctx = $("#line-chart").get(0).getContext("2d");
var lineChart = new Chart(ctx).Line(line_chart_data);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://rawgit.com/nnnick/Chart.js/master/Chart.min.js"></script>



<canvas id="line-chart" width="100" height="100"></canvas>

＆＃13;

＆＃13;

＆＃13;