[javascript] chart.js v2로 차트에서 범례 제거

Program / 글쓴이

저는 Bootstrap, JQuery 및 Chart.js (v2)를 사용하여 홈페이지를 만들고 있습니다. v1을 사용하여 구현했지만 최근 Bower에 들어가이를 사용하여 v2를 다운로드했습니다.

각각 원형 차트를 포함하는 4 개의 열로 구성된 그리드를 만들고 있지만 v2의 크기 조정은 작업을 수행하는 데 다소 혼란 스럽습니다. 차트가 반응 형이어서 태블릿 및 스마트 폰과 같은 더 작은 장치로 적절하게 확장되기를 원하며 내 문제 중 하나는 내 섹션 위로 마우스를 가져갈 때 차트의 범례와 호버 정보를 제거하는 것입니다. 차트.

index.html

<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-3">
                <canvas id="chart1"></canvas>
            </div>
            <div class="col-xs-3">
                <canvas id="chart1"></canvas>
            </div>
            <div class="col-xs-3">
                <canvas id="chart1"></canvas>
            </div>
            <div class="col-xs-3">
                <canvas id="chart1"></canvas>
            </div>
        </div>
    </div>
</body>

functions.js

$(document).ready(function(){
    var canvas = $("#chart1");
    var data = {
        labels: [],
        datasets: [{
            data: [10, 10],
            backgroundColor: ["#F7464A", "#FDB45C"],
            hoverBackgroundColor: ["#FF5A5E", "#FFC870"]
        }]
    };

    var chart1 = new Chart(canvas, {
        type: "pie",
        data: data,
    });
});

빈 “레이블”필드를 제거하면 차트가 더 이상 작동하지 않습니다. 그리고 모양 상 차트 상단에 작은 간격이있어 헤더가 작성되었음을 나타낼 수 있지만 빈 문자열 일뿐입니다.

누구든지 범례와 호버 설명을 제거하는 방법에 대한 아이디어가 있습니까? 나는 이것이 어떻게 사용되는지에 대해 머리를 이해할 수 없다.

시간이 생기면 jsfiddle 주위에 손을 댈 것입니다!

편집 : 문서 링크 : https://nnnick.github.io/Chart.js/docs-v2/#getting-started

답변

새 차트 개체를 만들 때 옵션 개체를 차트에 추가 할 수 있습니다.

var chart1 = new Chart(canvas, {
    type: "pie",
    data: data,
    options: {
         legend: {
            display: false
         },
         tooltips: {
            enabled: false
         }
    }
});

답변

다음을 사용하여 옵션을 변경할 수 있습니다. Chart.defaults.globaljavascript 파일에서 . 따라서 범례 및 도구 설명 옵션을 변경하려고합니다.

범례 제거

Chart.defaults.global.legend.display = false;

툴팁 제거

Chart.defaults.global.tooltips.enabled = false;

다음 작업 피들러입니다.

답변

다음 줄 범례를 추가하면됩니다. {display : false}

답변