私はChartJSに慣れていないため、凡例にいくつかの問題があります。私は次のような3本の棒のシンプルな棒グラフを持っています:
<div class="x_panel">
<div class="x_title">
<h2>Bar graph</h2>
<ul class="nav navbar-right panel_toolbox" style="padding-left:5%">
<li>
<a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li>
<a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<canvas id="mybarChart"></canvas>
</div>
</div>
var mybarChart = new Chart(ctx, {
type: 'bar',
data: {
labels: [],
datasets: [{
label: '# of Votes',
backgroundColor: "#000080",
data: [80]
}, {
label: '# of Votes2',
backgroundColor: "#d3d3d3",
data: [90]
},
{
label: '# of Votes3',
backgroundColor: "#add8e6",
data: [45]
}]
},
options: {
legend: {
display: true,
labels: {
fontColor: "#000080",
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
しかし、表示されたチャートは空です:(キャンバスの下に別のdivを追加し、それを呼び出すことで凡例を表示しようとしました:
document.getElementById('barlegend').innerHTML = mybarChart.generateLegend();
同じ結果で:(
私は何を間違えていますか?
質問で指定したコードに基づいて、チャートデータオブジェクトにlabels
データを追加するのを忘れたようです。この情報がないと、chartjsは軸を生成して各データセットデータをそれにマッピングすることができません。
また、あなたは凡例をチャートの下にしたいと言ったので、display: bottom
オプション。これが作業コードです。
var ctx = document.getElementById("mybarChart").getContext("2d");
var mybarChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Votes'],
datasets: [{
label: '# of Votes',
backgroundColor: "#000080",
data: [80]
}, {
label: '# of Votes2',
backgroundColor: "#d3d3d3",
data: [90]
}, {
label: '# of Votes3',
backgroundColor: "#add8e6",
data: [45]
}]
},
options: {
legend: {
display: true,
position: 'bottom',
labels: {
fontColor: "#000080",
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
動作する codepenの例 もあります。