解决方法
您可以使用html创建自定义图例.以下是如何使用自定义标题(和自定义用户界面)创建自定义图例的示例.
function legendClickCallback(event) {
event = event || window.event;
var target = event.target || event.srcElement;
while (target.nodeName !== 'LI') {
target = target.parentElement;
}
var parent = target.parentElement;
var chartId = parseInt(parent.classList[0].split("-")[0],10);
var chart = Chart.instances[chartId];
var index = Array.prototype.slice.call(parent.children).indexOf(target);
var Meta = chart.getDatasetMeta(index);
if (Meta.hidden === null) {
Meta.hidden = !chart.data.datasets[index].hidden;
target.classList.add('hidden');
} else {
target.classList.remove('hidden');
Meta.hidden = null;
}
chart.update();
}
var ctx = document.getElementById("myChart");
var myLegendContainer = document.getElementById("myChartLegend");
var myChart = new Chart(ctx,{
type: 'bar',data: {
labels: ["values #1","values #2"],datasets: [
{
label: "One",backgroundColor: "red",data: [26,36]
},{
label: "Two",backgroundColor: "blue",data: [34,40]
}
]
},options: {
legend: {
display: false
},scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
myLegendContainer.innerHTML = myChart.generateLegend();
var legendItems = myLegendContainer.getElementsByTagName('li');
for (var i = 0; i < legendItems.length; i += 1) {
legendItems[i].addEventListener("click",legendClickCallback,false);
}
.myChartDiv {
max-width: 600px;
max-height: 400px;
}
[class="0-legend"] {
cursor: pointer;
list-style: none;
padding-left: 0;
}
[class="0-legend"] li {
display: inline-block;
padding: 0 5px;
}
[class="0-legend"] li.hidden {
text-decoration: line-through;
}
[class="0-legend"] li span {
border-radius: 5px;
display: inline-block;
height: 10px;
margin-right: 10px;
width: 10px;
}
.legend-Box{
border-color: gray;
border-style: dashed;
margin-top: 25px;
}
<script src="https://npmcdn.com/chart.js@latest/dist/Chart.bundle.min.js"></script>
<html>
<body>
<div class="myChartDiv">
<canvas id="myChart" width="600" height="400"></canvas>
<div class='legend-Box'>
<span>Chart legend</span>
<div id="myChartLegend"></div>
</div>
</div>
</body>
</html>
我用this example的代码创建了上面的例子
