ChartJS - проблема с линейной диаграммой только с 1 точкой

Question

Я только что нашел эту маленькую ошибку, когда хотел показать одну единственную точку, используя линейную диаграмму. Я не знаю, почему она не показала смысла. Вот скриншот:

Вот как я создал свой объект:

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

Это мой текущий обходной путь, Eventhough она по-прежнему дает мне тот же результат:

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>