Chartjs棒グラフの凡例
Chartjsを使用して作成した棒グラフに凡例が表示されるのに問題があります。ドキュメントでは凡例テンプレートについて説明していますが、これをグラフに実装する方法の良い例を見つけることができないようです。以下は、グラフを生成するために使用しているコードです。
<div style="width: 100%;">
<canvas id="canvas" height="450" width="600"></canvas>
<div id="legendDiv"> </div>
</div>
<script>
var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
var barChartData = {
labels : ["Item 1","Item 2","Item 3","Item 4","Item 5","Item 6","Item 7","Item 8","Item 9","Item 10","Item 11","Item 12","Item 13","Item 14","Item 15","Item 16","Item 17"]
datasets : [
{
fillColor : "rgba(166,166,166,0.5)",
strokeColor : "rgba(166,166,166,0.8)",
highlightFill: "rgba(166,166,166,0.75)",
highlightStroke: "rgba(166,166,166,1)",
data : [10,4,3,4,3,6,4,1,10,3,3,10,2,4,10,3,4]
},
{
fillColor : "rgba(196,64,54,0.5)",
strokeColor : "rgba(196,64,54,0.8)",
highlightFill : "rgba(196,64,54,0.75)",
highlightStroke : "rgba(196,64,54,1)",
data : [6,3,2,3,2,3,4,1,8,3,3,6,1,3,8,3,4]
}
]
}
window.onload = function(){
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx).Bar(barChartData, {
responsive : true
});
}
</script>
<div>
以下の回答IS CHARTJS 1.Xの場合
したがって、以下は、各データセットに付与する必要があるラベルを使用して凡例を設定する方法の例です。デフォルトの凡例テンプレートを使用して、チャートでgenerateLegend()を呼び出してから配置するだけです。このページの
var helpers = Chart.helpers;
var canvas = document.getElementById('bar');
var randomScalingFactor = function() {
return Math.round(Math.random() * 100)
};
var barChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
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: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
}, {
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,0.8)",
highlightFill: "rgba(151,187,205,0.75)",
highlightStroke: "rgba(151,187,205,1)",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
}]
}
//
var bar = new Chart(canvas.getContext('2d')).Bar(barChartData, {
tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>kb",
animation: false,
});
//
var legendHolder = document.createElement('div');
legendHolder.innerHTML = bar.generateLegend();
document.getElementById('legend').appendChild(legendHolder.firstChild);ul {
list-style: none;
}
ul li {
display: block;
padding-left: 30px;
position: relative;
margin-bottom: 4px;
border-radius: 5px;
padding: 2px 8px 2px 28px;
font-size: 14px;
cursor: default;
height:20px;
width: 140px;
-webkit-transition: background-color 200ms ease-in-out;
-moz-transition: background-color 200ms ease-in-out;
-o-transition: background-color 200ms ease-in-out;
transition: background-color 200ms ease-in-out;
}
li span {
display: block;
position: absolute;
left: 0;
top: 0;
width: 20px;
border-radius: 5px;
height:20px
}
li span.bar-legend-text {
left:25px;
width:120px;
}
#chart-area > *{
float:left
}<script src="https://raw.githack.com/chartjs/Chart.js/v1.1.1/Chart.min.js"></script>
<div id="chart-area">
<canvas id="bar" width="250" height="250" style="width: 250px; height: 250px;"></canvas>
<div id="legend"></div>
</div>これを試して
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,0.8)",
highlightFill: "rgba(151,187,205,0.75)",
highlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}
]
};
var context = document.getElementById('clients').getContext('2d');
var clientsChart = new Chart(context).Bar(data);
HTML：
<canvas id="clients" width="450" height="350"></canvas>
答えはありますが、問題なく動作しています...
var ctx = document.getElementById("canvas").getContext("2d");
new Chart(ctx).HorizontalBar(barChartLocData, {
responsive: true,
scaleFontColor: "#000",
showTooltips: false,
onAnimationComplete: function() {
var ctx = this.chart.ctx;
ctx.font = this.scale.font;
ctx.fillStyle = this.scale.textColor
ctx.textAlign = "right";
ctx.textBaseline = "right";
this.datasets.forEach(function(dataset) {
dataset.bars.forEach(function(bar) {
ctx.fillText(bar.value, bar.x, bar.y - 5);
});
});
}
});最新バージョン2.6.0の場合、これは legendCallback を使用して実行できます。
凡例のテンプレートを設定します。
legendCallback: function(chart) {
var text = [];
text.Push('<ul>');
for (var i=0; i<chart.data.datasets.length; i++) {
console.log(chart.data.datasets[i]); // see what's inside the obj.
text.Push('<li>');
text.Push('<span style="background-color:' + chart.data.datasets[i].borderColor + '">' + chart.data.datasets[i].label + '</span>');
text.Push('</li>');
}
text.Push('</ul>');
return text.join("");
},
凡例の場所のターゲットとなるhtml要素を追加します。
<div id="chart-legends"></div>
次に、凡例を生成します。
document.getElementById('chart-legends').innerHTML = myChart.generateLegend();