ChartJS - Sadece 1 puntolu çizgi grafik sorunu

Question

Sadece bu küçük hatayı çizgi grafik kullanarak 1 tek nokta göstermek istediğimde buldum .. Neden noktayı göstermediğini bilmiyorum.

İşte

benim nesneyi oluşturan böyle: İşte bir ekran

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

hala bana aynı sonucu verir satışlardaki Bu, şu andaki çözüm budur:

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) 

Bu sorun için bir çözüm var mı?

Answer 1

Bu sorunlar, grafiğin x eksenini çizmeye çalışırken bir değişkenin sonsuz hale gelmesinden kaynaklandı. Aşağıda gibi ölçeğini genişletmek olabilir ya yüzden bunun için düzeltme Chartjs en ölçek çekirdeğine gitmek zorunda ya da ben chartjs 1.0 giderilen

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>