चार्ट के साथ चार्ट पर लीजेंड को हटाना। vs v2


105

मैं बूटस्ट्रैप, 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

जवाबों:


253

जब नया चार्ट ऑब्जेक्ट बनाया जाता है तो विकल्प ऑब्जेक्ट को चार्ट में जोड़ा जा सकता है।

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

1
बहुत बहुत धन्यवाद, मैं प्रतिक्रिया का उपयोग कर रहा था और इस तरह से प्रतिक्रिया के रूप में करना था .. <डोनट डेटा = {डेटा} विकल्प = {{किंवदंती: झूठी}} />
न्यूटन शेख

42

आप Chart.defaults.globalअपनी जावास्क्रिप्ट फ़ाइल में उपयोग करके विकल्प बदल सकते हैं । तो आप किंवदंती और टूलटिप विकल्पों को बदलना चाहते हैं।

किंवदंती निकालें

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

टूलटिप निकालें

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

यहाँ एक काम करने वाला फ़िडलर है।


ठंडा। मैंने उन कार्यों का उपयोग नहीं किया क्योंकि मुझे नहीं पता था कि मैं अपनी जावास्क्रिप्ट में उन कमांडों को लिख सकता हूं।
ज़ेलियाक्स

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.