如何强制我的ChartJS canvas图例停留在单个列中？ [英] How can I force my ChartJS canvas legend to stay in a single column?
问题描述
我检查了一些不同的来源并查看了各个选项，但似乎无法使我的图例停留在一栏中。例如，
I've checked some different sources and looked around the options, but I can't seem to be able to get my legend to stay in one column. For example,
在上图中，您我们会注意到其中一个图例已被切断并放在一边。这发生在< = 550像素左右。我想迫使他们都留在一个专栏中。这是重新创建了图表的JSFiddle。我不得不在JS文件的开头粘贴一些导入内容，因为在小提琴选项中找不到它们。滚动到底部查找相关内容。任何帮助，将不胜感激。 https://jsfiddle.net/lochrine/02yrpcxg/
In the picture above, you'll notice one piece of the legend is getting cut off and placed to the side. This happens at around <= 550 pixels. I would like to force them all to remain in one column. Here is a JSFiddle with the chart recreated. I had to paste in some imports in the beginning of the JS file, because I couldn't find them in the fiddle options. Scroll to the bottom for the relevant stuff. Any help would be appreciated. https://jsfiddle.net/lochrine/02yrpcxg/
以下是相关的JS：
//Line Graph Script
$('.line-graph').each(function () {
var legendlabels = $(this).data('legendlabels');
var datapoints = $(this).data('datapoints');
var suppliers = $(this).data('suppliers');
var datatype = $(this).data('datatype');
var yAxisString = "Amounts";
if (datatype == "units") { yAxisString = "Units Sold"; }
else if (datatype == "money") { yAxisString = "Amount (Dollars)"; }
console.log(datatype);
new Chart($(this).get(0).getContext('2d'), {
type: 'line',
data: {
labels: legendlabels,
datasets: $.map(datapoints, function (e, i) {
return {
backgroundColor: lineChartColors[i],
borderColor: lineChartColors[i],
fill: false,
data: e,
label: suppliers[i],
lineTension: 0.2,
}
})
},
options: {
layout: {
padding: {
left: 20,
right: 40,
top: 20,
bottom: 20
}
},
legend: {
display: true,
position: 'left'
},
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Month'
}
}],
yAxes: [{
ticks: {
beginAtZero: true,
callback: function (value, index, values) {
return addCommas(value);
}
},
scaleLabel: {
display: true,
labelString: yAxisString
}
}]
},
plugins: {
datalabels: {
display: false
}
},
tooltips: {
callbacks: {
label: function (tooltipItem, data) {
var datasetLabel = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].toString();
var label = data.datasets[tooltipItem.datasetIndex].label + ': ';
var formattedReturnLabel;
if (datatype == "money") {
formattedReturnLabel = label + '$' + addCommas(datasetLabel);
} else {
formattedReturnLabel = label + addCommas(datasetLabel);
}
return formattedReturnLabel;
}
}
}
}
});
})
以及相关的HTML：
<div class="widget widget-double">
<div class="m-3 border">
<table style="cursor: pointer !important;" onclick="window.location.href='@Url.Action("SupplierUnitsByMonth", "Reports")'" class="table mb-0"><thead><tr><th class="text-center">@ViewBag.widgetName</th></tr></thead></table>
<div class="w-100 aspect-ratio-50 p-2">
<canvas id="chart-units-history" data-legendlabels="[@ViewBag.Months]" data-suppliers= "[@ViewBag.suppliers]" data-datapoints="[@ViewBag.supplierTotals]" data-datatype="units" class="line-graph w-100 aspect-ratio-50"></canvas>
</div>
</div>
</div>
推荐答案
您可以生成自定义 HTML图例，使用 legendCallback 以及一些 CSS 。
You can generate custom HTML legend using legendCallback together with some CSS.
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 + '\')">' +
ds.label + '</span>' +
'</li>';
});
return html + '</ul>';
},
要使其行为与标准Chart.js图表相同，在图例标签上单击鼠标时，将调用
onLegendClicked函数。此功能可切换各个数据集的隐藏状态，并在普通和删除线之间更改标签文本样式。
To make this behave the same as standard Chart.js charts, the function
onLegendClickedis invoked when a mouse click occurs on a legend label. This function toggles the hidden state of individual datasets and changes label text style between normal and strike-through.
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();
};
请查看修改后的代码，看看其工作原理。
Please take a look at your amended code and see how it works.
const lineChartColors = ["#000000", "#fd7730", "#ffd35c", "#3fc6f3", "#28a745", "#488cf2", "#4755d3", "#9768c9", "#f2748d", "#f287e7", '#992499', '#6BD69E'];
const legendlabels = ['Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'];
const datapoints = [
[205, 275, 359, 329, 262, 302, 290, 323, 279, 238, 307, 245],
[16, 13, 14, 11, 23, 11, 24, 23, 15, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 53, 0],
[169, 194, 261, 193, 151, 158, 128, 143, 163, 173, 139, 208],
[8, 5, 8, 2, 4, 4, 0, 0, 0, 0, 0, 0],
[0, 0, 19, 36, 7, 35, 27, 30, 13, 0, 0, 0],
[0, 47, 30, 54, 59, 48, 41, 38, 65, 24, 44, 37],
[12, 16, 27, 33, 18, 46, 70, 89, 23, 41, 71, 0]
];
var suppliers = ["Total", "Starkey", "Resound", "Widex", "Rexton", "Unitron", "Phonak", "Signia"];
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('myChart', {
type: 'line',
data: {
labels: legendlabels,
datasets: datapoints.map((e, i) => ({
backgroundColor: lineChartColors[i],
borderColor: lineChartColors[i],
fill: false,
data: e,
label: suppliers[i],
lineTension: 0.2,
}))
},
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 + '\')">' +
ds.label + '</span>' +
'</li>';
});
return html + '</ul>';
},
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Month'
}
}],
yAxes: [{
ticks: {
beginAtZero: true
},
scaleLabel: {
display: true,
labelString: "Units Sold"
}
}]
},
plugins: {
datalabels: {
display: false
}
}
}
});
document.getElementById("legend").innerHTML = chart.generateLegend();
#chart-wrapper {
display: flex;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#legend li {
cursor: pointer;
display: flex;
padding: 0 10px 5px 0;
}
#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 id="chart-wrapper">
<div id="legend"></div>
<canvas id="myChart" height="75"></canvas>
</div>
这篇关于如何强制我的ChartJS canvas图例停留在单个列中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
