ChartJS - Problem z linijką tylko z jednym punktem

Question

Właśnie znalazłem ten mały błąd, gdy chciałem pokazać 1 pojedynczy punkt za pomocą wykresu liniowego. Nie wiem, dlaczego nie pokazało tego punktu. Oto zrzut ekranu:

Oto jak tworzę obiekt:

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

To jest mój obecny obejście, mimo iż wciąż daje mi ten sam wynik:

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) 

Czy istnieje obejście tego problemu?

Answer 1

Ten problem został spowodowany przez ustawienie zmiennej na nieskończoność, gdy chartjs próbuje narysować oś X. Poprawkę dotyczącą tego musi iść do rdzenia skali Chartjs tak, można też rozszerzyć skalę jak poniżej lub Dodałem tę poprawkę do mojego niestandardowego kompilacji 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>