バーグラフの凡例の調整 - チャートJS

Question

私はチャートJSでの新たなんだと私は、チャート怒鳴る表示伝説と棒グラフがあります

var data = { 
     labels: [], 
     datasets: [{ 
      label: 'Disk C', 
      backgroundColor: "#000080", 
      data: [80] 
     }, { 
      label: 'Disk D', 
      backgroundColor: "#d3d3d3", 
      data: [90] 
     }, 
     { 
      label: 'Memory', 
      backgroundColor: "#add8e6", 
      data: [45] 
     }] 
    }; 

    var ctx = document.getElementById("mybarChart"); 

    ctx.height = 300; 

    var mybarChart = new Chart(ctx, { 
     type: 'bar', 
     responsive: true, 
     data: data, 
     options: { 
      legend: { 
       display: true, 
       position: 'bottom' 
      }, 
      scales: { 
       yAxes: [{ 
        display: false, 
        ticks: { 
         beginAtZero: true 
        }, 
        gridLines: { 
         color: "rgba(0, 0, 0, 0)", 
        } 
       }], 
       xAxes: [{ 
        display: false, 
        gridLines: { 
         color: "rgba(0, 0, 0, 0)", 
        }, 
        barPercentage: 0.5, 
        categoryPercentage: 0.5 
       }] 
      } 
     } 
    }); 

をしかし伝説がのようなものでなければなりません：

私の例ではラベルが単一の行に表示されているので、色の矩形をもっと小さくし、値を1つ下に表示することは可能ですか？

Answer 1

残念ながら、希望する方法でデフォルトの凡例をカスタマイズする方法はありません。しかし、幸いなことに、chart.jsはこれを考え、キャンバスオブジェクトの外で独自の凡例を生成し、スタイルを設定する仕組みを提供していました（通常のhtml/cssを使用しています）。

legendCallbackオプションプロパティを使用して、凡例htmlを生成するメソッドを定義し、.generateLegend()プロトタイプメソッドを呼び出してページに配置することができます。ここに私が意味することがあります。

マイページのHTML。

<div style="width:25%;"> 
    <canvas id="mybarChart"></canvas> 
    <div id="legend"></div>  
</div> 

次に、「legendCallback」オプションプロパティでの凡例の表示方法を定義します。

legendCallback: function(chart) { 
    var text = []; 
    text.push('<ul class="' + chart.id + '-legend">'); 
    for (var i = 0; i < chart.data.datasets.length; i++) { 
    text.push('<li><div class="legendValue"><span style="background-color:' + chart.data.datasets[i].backgroundColor + '">&nbsp;&nbsp;&nbsp;&nbsp;</span>'); 

    if (chart.data.datasets[i].label) { 
     text.push('<span class="label">' + chart.data.datasets[i].label + '</span>'); 
    } 

    text.push('</div></li><div class="clear"></div>'); 
    } 

    text.push('</ul>'); 

    return text.join(''); 
} 

最後に、私のページに伝説のhtmlを追加します。

$('#legend').prepend(mybarChart.generateLegend()); 

はいつものように、ここでの作業溶液を示すcodepen exampleあります。コールバックによって生成されたHTMLを変更してCSSを使用するだけで、凡例の見た目や感触を変えることができます。