Chartjs v2 xAxes etiketi scaleLabel ile örtüşüyor

Question

js v2 şemasının üst üste binmesiyle çakışır. Bu Çizgi grafik, ancak kolayca uyarlanmış olabilir:

1: kodun

Bölüm senin sorunun iki olası çözümü vardır

    scales: { 
          xAxes: [{ 
           display: true, 
           ticks: { 
            autoSkip: false, 
            autoSkipPadding: 20 
           }, 
           scaleLabel: { 
            display: true, 
            labelString: "ProductName(ProductName)" 
           } 
          }], 

Answer 1

aşağıdaki gibidir bir çubuk grafik.

Gösterge, ChartJs kitaplığının varsayılan seçeneklerinin bir parçasıdır. Yani açıkça bir seçenek olarak eklemeniz gerekmez.

Kitaplık HTML'yi oluşturur. Sadece sayfanıza eklenmesi meselesidir. Örneğin, belirli bir DIV'nin içHTML'sine ekleyin. grafik seçenekleri bir efsane şablonu ekleme

Ayrıca bazı temel css eklemeniz gerekir:

<div> 
    <canvas id="chartDiv" height="400" width="600"></canvas> 
    <div id="legendDiv"></div> 
</div> 

<script> 
    var data = { 
     labels: ["January", "February", "March", "April", "May", "June", "July"], 
     datasets: [ 
      { 
       label: "The Flash's Speed", 
       fillColor: "rgba(220,220,220,0.2)", 
       strokeColor: "rgba(220,220,220,1)", 
       pointColor: "rgba(220,220,220,1)", 
       pointStrokeColor: "#fff", 
       pointHighlightFill: "#fff", 
       pointHighlightStroke: "rgba(220,220,220,1)", 
       data: [65, 59, 80, 81, 56, 55, 40] 
      }, 
      { 
       label: "Superman's Speed", 
       fillColor: "rgba(151,187,205,0.2)", 
       strokeColor: "rgba(151,187,205,1)", 
       pointColor: "rgba(151,187,205,1)", 
       pointStrokeColor: "#fff", 
       pointHighlightFill: "#fff", 
       pointHighlightStroke: "rgba(151,187,205,1)", 
       data: [28, 48, 40, 19, 86, 27, 90] 
      } 
     ] 
    }; 

    var myLineChart = new Chart(document.getElementById("chartDiv").getContext("2d")).Line(data); 
    document.getElementById("legendDiv").innerHTML = myLineChart.generateLegend(); 
</script> 

2 (Eğer, vb renkler düzenlerken eğer varsayılan seçenekleri düzenleyin) iyi görünmesini sağla. Bu iki seçenekten

//legendTemplate takes a template as a string, you can populate the template with values from your dataset 
var options = { 
    legendTemplate : '<ul>' 
        +'<% for (var i=0; i<datasets.length; i++) { %>' 
        +'<li>' 
        +'<span style=\"background-color:<%=datasets[i].lineColor%>\"></span>' 
        +'<% if (datasets[i].label) { %><%= datasets[i].label %><% } %>' 
        +'</li>' 
       +'<% } %>' 
       +'</ul>' 
    } 

    //don't forget to pass options in when creating new Chart 
    var lineChart = new Chart(element).Line(data, options); 

    //then you just need to generate the legend 
    var legend = lineChart.generateLegend(); 

    //and append it to your page somewhere 
    $('#chart').append(legend); 

Ya çalışacaktır. Senin durumunda

efsane kodu (boşluk ekleyerek dahil olmak üzere bu

gibi bir şey (Zaten bir SütunGrafiği Oluşturulan varsayarsak) tercih ediyorum ancak

<div id="legendDiv"></div> 
document.getElementById("legendDiv").innerHTML = BarChart.generateLegend(); 

Sonra efsane biçimlendirmek için css kullanmak bakacağız grafikteki gösterge arasındaki)