Chartjs v2 xAxes etichetta si sovrappone con scaleLabel

Question

Il grafico js v2 si sovrappone con c'è un modo per spostare la labelString di scaleLabel più in basso in modo che non si sovrapponga.Vedere la schermata segnata in giallo e rosso.

Parte del codice è la seguente

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

Answer 1

Ci sono due possibili soluzioni al problema:

1: Questo è un grafico a linee, ma può essere facilmente adattato a un grafico a barre.

La legenda fa parte delle opzioni predefinite della libreria ChartJs. Quindi, non è necessario aggiungerlo esplicitamente come opzione.

La libreria genera l'HTML. Si tratta semplicemente di aggiungere alla tua pagina. Ad esempio, aggiungilo al innerHTML di un determinato DIV. (Modificare le opzioni di default se si sta modificando i colori, ecc)

<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: Aggiunta di un modello di leggenda in opzioni grafico

avrete anche bisogno di aggiungere un po 'di CSS di base per fallo sembrare ok

//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); 

Una di queste due opzioni funzionerà.

Nel tuo caso il codice di leggenda sarà simile a questa

(Supponendo che si dispone già di un DiagrammaBarre Generated)

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

Poi usare i CSS per formattare la leggenda però si preferisce (inclusa l'aggiunta di spaziatura tra la legenda nel grafico)