안녕하세요, 버튼을 클릭하여 내 라인 차트 (chart.js)의 범례를 표시하거나 숨기고 싶습니다.
나는 이것을 지금까지 시도했다.
다음 코드는 scatterChart.legend.options.display의 값을 변경하지만 scatterChart.update ()를 실행하면 값이 자동으로 초기 값으로 변경됩니다!
function showHideLegend() {
console.log(scatterChart.legend.options.display); // -> "inital-value" e.g.: true
if (scatterChart.legend.options.display == true) {
scatterChart.legend.options.display = false;
} else {
scatterChart.legend.options.display = true;
}
console.log(scatterChart.legend.options.display); // -> value successfully changed e.g.: false
scatterChart.update();
//Chart.defaults.global.legend.display = false; // <- does not have an effect
console.log(scatterChart.legend.options.display); // -> "inital-value" e.g.: true
}
function initMap() {
scatterChart = new Chart(document.getElementById("scatterChart"), {
type: 'line',
data: {
/*datasets: [
]
*/
},
showScale: false,
options: {
legend: {
position: 'right',
labels: {
fontSize: 15
}
}
}
});
HTML
<canvas id="scatterChart" style="width: 1920px; height: 1080px; background-image:url('image.jpg'); background-size: 100% 100%;"></canvas>
<div id="scatterLegend"> //howToPutLegendHere??// </div>
<input type="button" value="Show/Hide Legend" onclick="showHideLegend()">
chart.js 인스턴스 객체에서 잘못된 범례 구성을 업데이트하려고 한 것 같습니다. 여기에 올바른 방법이 있습니다.
document.getElementById('hideLEgend').addEventListener('click', function() {
// toggle visibility of legend
myLine.options.legend.display = !myLine.options.legend.display;
myLine.update();
});
업데이트하려고했던 것 (예 chart.legend.options:)은 기본 범례 구성 개체입니다. 이것은 차트의 options.legend구성 에서 정의한 모든 옵션과 병합됩니다 .
다음은 버튼 클릭의 범례 표시 / 숨기기 동작을 보여주는 코드 펜 예제 입니다.
내장 된 범례를 사용하지 않도록 선택하고 페이지의 어느 곳에서나 순수한 HTML / CSS로 범례를 생성 한 다음 jQuery (또는 표준 자바 스크립트)를 사용하여 표시하거나 숨길 수 있습니다. 표시 / 숨기기에 대한 예제는 제공하지 않지만 ( jQuery의 표시 / 숨기기 기능 참조 ) 사용자 지정 범례를 생성하는 방법을 보여줄 것입니다. 먼저 options.legendCallback옵션을 사용하여 사용자 지정 범례를 생성하는 함수를 만들어야합니다.
options: {
legend: {
display: false,
position: 'bottom'
},
legendCallback: function(chart) {
var text = [];
text.push('<ul class="' + chart.id + '-legend">');
for (var i = 0; i < chart.data.datasets.length; i++) {
text.push('<li><div class="legendValue"><span style="background-color:' + chart.data.datasets[i].backgroundColor + '"> </span>');
if (chart.data.datasets[i].label) {
text.push('<span class="label">' + chart.data.datasets[i].label + '</span>');
}
text.push('</div></li><div class="clear"></div>');
}
text.push('</ul>');
return text.join('');
}
}
그런 다음 .generateLegend()프로토 타입 메서드를 사용하여 템플릿 ( legendCallback위에 정의 된 함수 를 실행)을 생성하고 이를 DOM에 삽입합니다.
$('#legend').prepend(mybarChart.generateLegend());
다음은 사용자 지정 범례 접근 방식을 보여주는 코드 펜 예제 입니다. legendCallback범례 구조에 원하는 HTML을 사용 하도록 함수를 수정 한 다음 표준 CSS를 사용하여 스타일을 지정할 수 있습니다 . 마지막으로 자바 스크립트를 사용하여 버튼 클릭시 표시 / 숨기기를합니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다