当文本太长时,我的ChartJs图例文本在同一行溢出。是否有任何参数可用于启用文本换行。
legend : {
display : true,
position : 'bottom',
fullWidth: false,
labels : {
fontColor : "#000",
// boxWidth : "3"
}
}
在其他图表库(如highcharts)中,您只需设置宽度,如果超出宽度,文本将被包装。 ChartJS中有这样的选项吗?
Highcharts Library示例:
legend: {
itemStyle: {
width: 90 // or whatever, auto-wrap
},
}
我尝试使用legendCallback,但在这种情况下,我会松开' onclick' ChartJS中开箱即用的图例框的有用功能。所以我不想这样做。不要使用图例模板。
答案 0 :(得分:2)
不幸的是,没有自动包裹长图例标签的选项。
您必须使用legendCallback
和一些CSS
来生成自定义HTML legend。以下代码期望在多行标签的情况下,dataset.label
是字符串的string
或array
(对于某些类型的图表(例如饼图), ,各个图例标签代表一个唯一的dataset
中的值。在这种情况下,代码看起来略有不同,如this answer )。
legendCallback: chart => {
let html = '<ul>';
chart.data.datasets.forEach((ds, i) => {
html += '<li>' +
'<span style="width: 36px; height: 14px; background-color:' + ds.backgroundColor + '; border:' + ds.borderWidth + 'px solid ' + ds.borderColor + '" onclick="onLegendClicked(event, \'' + i + '\')"> </span>' +
'<span id="legend-label-' + i + '" onclick="onLegendClicked(event, \'' + i + '\')">' +
(Array.isArray(ds.label) ? ds.label.join('<br/>') : ds.label) + '</span>' +
'</li>';
});
return html + '</ul>';
},
为使其行为与标准Chart.js图表相同,在图例标签上单击鼠标时将调用功能
onLegendClicked
。此功能可切换单个数据集的隐藏状态,并在普通和删除线之间更改标签文本样式。
function onLegendClicked(e, i) {
const hidden = !chart.data.datasets[i].hidden;
chart.data.datasets[i].hidden = hidden;
const legendLabelSpan = document.getElementById("legend-label-" + i);
legendLabelSpan.style.textDecoration = hidden ? 'line-through' : '';
chart.update();
};
请查看下面的可执行代码,并了解其工作原理:
function onLegendClicked(e, i) {
const hidden = !chart.data.datasets[i].hidden;
chart.data.datasets[i].hidden = hidden;
const legendLabelSpan = document.getElementById("legend-label-" + i);
legendLabelSpan.style.textDecoration = hidden ? 'line-through' : '';
chart.update();
};
const chart = new Chart(document.getElementById("chart"), {
type: "bar",
data: {
labels: ['A', 'B', 'C'],
datasets: [{
label: ['Legend label', 'on two lines'],
data: [5, 8, 4],
fill: false,
backgroundColor: "rgba(255, 99, 132, 0.2)",
borderColor: "rgb(255, 99, 132)",
borderWidth: 1
},
{
label: ['Legend label', 'spread over', 'three lines'],
data: [3, 5, 4],
fill: false,
backgroundColor: "rgba(255, 159, 64, 0.2)",
borderColor: "rgb(255, 159, 64)",
borderWidth: 1
},
{
label: "Short legend label",
data: [6, 5, 7],
fill: false,
backgroundColor: "rgba(255, 205, 86, 0.2)",
borderColor: "rgb(255, 205, 86)",
borderWidth: 1
}
]
},
options: {
legend: {
display: false
},
legendCallback: chart => {
let html = '<ul>';
chart.data.datasets.forEach((ds, i) => {
html += '<li>' +
'<span style="width: 36px; height: 14px; background-color:' + ds.backgroundColor + '; border:' + ds.borderWidth + 'px solid ' + ds.borderColor + '" onclick="onLegendClicked(event, \'' + i + '\')"> </span>' +
'<span id="legend-label-' + i + '" onclick="onLegendClicked(event, \'' + i + '\')">' +
(Array.isArray(ds.label) ? ds.label.join('<br/>') : ds.label) + '</span>' +
'</li>';
});
return html + '</ul>';
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
document.getElementById("legend").innerHTML = chart.generateLegend();
#legend>ul {
display: flex;
justify-content: center;
}
#legend li {
cursor: pointer;
margin: 0px 10px;
display: flex;
}
#legend li span {
padding-left: 8px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<div>
<canvas id="chart" height="60"></canvas>
<div id="legend"></div>
</div>