ChartJS - Problema grafico a linee con solo 1 punto

Question

Ho appena trovato questo piccolo bug quando volevo mostrare 1 punto singolo usando il grafico a linee .. Non so perché non ha mostrato il punto. Ecco lo screenshot:

Ecco come ho creato il mio oggetto:

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

Questa è la mia soluzione attuale, nonostante sapessero che mi dà sempre lo stesso risultato:

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) 

C'è qualche soluzione per questo problema?

Answer 1

Questo problema è stato causato da una variabile che diventa infinita quando chartjs sta tentando di disegnare l'asse x. La correzione di questo deve andare nel nucleo della scala di Chartjs modo si potrebbe o estendere la scala come qui di seguito o ho aggiunto questa correzione alla mia generazione personalizzata di 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>