ChartJS - Vấn đề biểu đồ đường chỉ với 1 điểm

Question

Tôi chỉ tìm thấy lỗi nhỏ này khi tôi muốn hiển thị 1 điểm duy nhất bằng biểu đồ đường .. Tôi không biết tại sao nó không hiển thị điểm. Dưới đây là ảnh chụp màn hình:

đây là cách tôi tạo ra đối tượng của tôi:

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

Đây là cách giải quyết hiện tại của tôi, dù cho nó vẫn mang lại cho tôi những kết quả tương tự:

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ó giải pháp nào cho vấn đề này không?

Answer 1

Vấn đề này là do biến trở thành vô cùng khi biểu đồ đang cố gắng vẽ trục x. Việc sửa chữa cho điều này đã đi vào cốt lõi của quy mô Chartjs do đó bạn có thể hoặc là mở rộng quy mô như dưới đây hay tôi đã thêm này khắc phục để xây dựng tùy chỉnh của tôi về 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>