问题描述
我使用 Chartjs
与线数据集混合制作了一个堆叠组条形图:
I made a stacked group bar graph using Chartjs
mixed with a line dataset:
我想通过将第一项 Productivité
的图例呈现为一条线(而不是显示为矩形)来区分它.
I would like to differentiate the legend of the first item Productivité
by rendering it as a line (and not as a rectangle as displayed).
我浏览了 legend 文档,但找不到如何实现我想要的.
I went through the legend documentation but could not find out how to achieve what I'm looking for.
推荐答案
我觉得唯一的办法就是自定义图例(见http://www.chartjs.org/docs/latest/configuration/legend.html#html-legends).
I think the only way is to customize the legend (see http://www.chartjs.org/docs/latest/configuration/legend.html#html-legends).
下面是一个例子:
var ctx = document.getElementById('myChart');
var config = {
type: 'bar',
options: {
legendCallback: function(chart) {
var text = [];
text.push('<ul class="' + chart.id + '-legend">');
var data = chart.data;
var datasets = data.datasets;
if (datasets.length) {
for (var i = 0; i < datasets.length; ++i) {
text.push('<li>');
if (datasets[i].type=='line') {
text.push('<span class="'+datasets[i].type+'" style="background-color:' + datasets[i].backgroundColor + '"></span>');
} else {
text.push('<span class="'+datasets[i].type+'" style="background-color:' + datasets[i].backgroundColor + '"></span>');
}
text.push(datasets[i].label);
text.push('</li>');
}
}
text.push('</ul>');
return text.join('');
},
legend: {
display: false,
},
scales: {
xAxes: [{
type: "category",
id: "axis-bar",
}, {
type: "time",
id: "axis-time",
display: false,
}, ],
},
},
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: "my dataset 1",
type: "line",
backgroundColor: "#0000FF",
borderColor: "#0000FF",
borderWidth: 1,
fill: false,
xAxisID: "axis-time",
data: [{x:1*3600,y:2124},{x:1.5*3600,y:12124},{x:2*3600,y:1636},{x:2.5*3600,y:11636},{x:3*3600,y:1057},{x:3.5*3600,y:11057},{x:4*3600,y:9433},{x:4.5*3600,y:19433},{x:5*3600,y:4512},{x:5.5*3600,y:4512},{x:6*3600,y:3581},{x:6.5*3600,y:3581},{x:7*3600,y:53},{x:7.5*3600,y:53},]
},{
label: "my dataset 2",
type: "bar",
backgroundColor: "#ff0000",
borderColor: "#ff0000",
borderWidth: 1,
fill: true,
xAxisID: "axis-bar",
data: [21242, 16360, 10577, 94337, 45312, 35581, 53]
}]
},
};
var myChart = new Chart(ctx, config);
var legend = myChart.generateLegend();
document.getElementById("legend").innerHTML = legend;
body {
font-family: 'Arial';
}
.container {
margin: 15px auto;
}
#chart {
float: left;
width: 70%;
}
#legend {
float: right;
}
[class$="-legend"] {
list-style: none;
cursor: pointer;
padding-left: 0;
}
[class$="-legend"] li {
display: block;
padding: 0 5px;
}
[class$="-legend"] li.hidden {
text-decoration: line-through;
}
[class$="-legend"] li span {
display: inline-block;
margin-right: 10px;
width: 20px;
}
[class$="-legend"] li span.bar {
height: 10px;
}
[class$="-legend"] li span.line {
height: 1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<div id="legend"></div>
<canvas id="myChart" width="400" height="200"></canvas>
或此处的 jsfiddle:https://jsfiddle.net/beaver71/g7oz0noe/
or a jsfiddle here: https://jsfiddle.net/beaver71/g7oz0noe/
PS:如果您还需要图例点击处理程序,您可以轻松添加它们,请参见以下小提琴示例:https://jsfiddle.net/beaver71/b5hdn9gw/
P.S.: if you need also legend click handlers you can add them easily, see for an example this fiddle: https://jsfiddle.net/beaver71/b5hdn9gw/
这篇关于使用 Chartjs 显示混合类型的图例(条形和线条)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!