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

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

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