चार्ट.जेएस पाई टूलटिप कटिंग

Question

मैं टूलटिप्स के साथ चार्ट.जेएस पाई चार्ट का उपयोग कर रहा हूं जिसे किसी कारण से काटा जा रहा है।

स्क्रीनशॉट संलग्न, किसी भी विशेषता/यह की देखभाल करने के लिए विकल्प नहीं मिला था ..

वहाँ वैसे भी यह की देखभाल करने के है?

धन्यवाद!

Answer 1

यह अनुचित कटऑफ चार्टजेएस के लिए गिथब भंडार में समस्या # 622 के रूप में उठाया गया था।

यह एक बग (जाहिर है इस बग अभी तक तय नहीं किया गया है)

https://github.com/nnnick/Chart.js/issues/622

कि इस मुद्दे के जवाब में होने के लिए निर्धारित किया गया था, रॉबर्ट Turrall एक समाधान है जो वे कहते हैं एक अच्छा है वैकल्पिक हल। यहाँ उसकी प्रस्तावित ठीक है:

मुझे यकीन है कि इस तथ्य यह है कि टूलटिप्स कैनवास के दायरे के भीतर उत्पन्न कर रहे हैं, यह मुश्किल ठीक करने के लिए कर रही है की वजह से है हूँ।

मैं अपने डोनट चार्ट पर एक ही मुद्दा था और नमूने फ़ोल्डर पर उदाहरण के अनुसार कस्टम टूलटिप्स को लागू करने से इसे हल - चार्ट initialisation कोड में अपने मौजूदा टूलटिप fontsize और टेम्पलेट सेटिंग्स के साथ संयोजन के रूप में काम किया:

var myDoughnutChart = new Chart(donut).Doughnut(donutdata, { 
    tooltipFontSize: 10, 
    tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>hrs", 
    percentageInnerCutout : 70 
}); 

कस्टम टूलटिप कोड के लिए नमूने/pie-customTooltips.html देखें। कॉपी/पेस्ट करें और यह सीधे काम करता है। बहुत खुश!

टूलटिप कैनवास के सीमा के बाहर अच्छी तरह से दिखाया गया है:

पुनश्च: वहाँ एक लाइन चार्ट उदाहरण भी है, जो मैं बार चार्ट के साथ तरीके से कार्य करेंगे अनुमान लगा रहा हूँ।

Answer 2

मुझे इसके लिए एक समाधान मिला। मेरे पास एक्स एक्स अक्ष पर खाली लेबल हैं, इसलिए मैंने अंतिम लेबल प्रविष्टि के लिए इसमें कई रिक्त स्थान वाले लेबल को जोड़ा है। इससे चार्टज को लेबल के लिए पर्याप्त जगह छोड़ने का कारण बन गया, जिससे टूलटिप फिट करने के लिए पर्याप्त जगह भी निकलती है।

इसके अतिरिक्त, मेरे डेटा बिंदुओं के लिए मेरे पास बड़ी मंडलियां हैं और दाईं ओर दाईं ओर क्लिप किया जा रहा था। लेबल में अतिरिक्त स्थान जोड़ना भी तय किया गया है।

यहां वह कोड है जहां मैं अपना लेबल बना देता हूं। ratings मेरी वास्तविक डेटा पहले परिभाषित किया गया है:

// Add blank labels and "Today" 
for (i=0; i<ratings.length; i++) { 
    labels.push(""); 
} 
labels[ratings.length-1] = "  "; 

var data = { 
    labels: labels, 
    datasets: [ 
     { 
      label: "Progress", 
      strokeColor: "rgba(255,165,0,1.0)", 
      pointColor: "white", 
      pointStrokeColor: "rgba(255,165,0,1.0)", 
      pointHighlightStroke: "#B87700", 
      data: ratings 
     } 
    ] 
}; 

भले ही आप अपने ग्राफ पर वास्तविक लेबल है, तो आप रिक्त स्थान अपने पिछले लेबल के लिए यह बड़ा बनाने के लिए जोड़ सकते हैं। यदि आप अपने लेबल को केंद्रित कर रहे हैं, तो आप पहले और बाद में उसी स्थान को जोड़ सकते हैं।

स्पष्ट रूप से ऐसी सीमाएं होंगी जहां यह आपके लिए काम करेगी या नहीं, लेकिन मेरे मामले में मैंने 7 रिक्त स्थान जोड़े और अब सभी अच्छे लग रहे हैं।

इसके अलावा, मेरे मामले में दाएं तरफ एक मुद्दा था, जबकि इस प्रश्न के बाईं ओर एक मुद्दा है।वही फिक्स काम करना चाहिए, लेकिन पहले लेबल पर जगह डालना चाहिए।

Answer 3

दिलचस्प बात यह है कि tooltipCaretSize0 पर विकल्प को हल करने से समस्या हल हो जाती है।
{ tooltipCaretSize: 0, ... }

Answer 4

मेरे मामले में, मैं टूलटिप में पाठ की मात्रा को कम करके इस मुद्दे के आसपास काम करने में सक्षम था। मैंने लेबल टेक्स्ट निर्दिष्ट करने के लिए कस्टम टूलटिप कॉलबैक का उपयोग करके ऐसा किया। मेरे प्रारंभ इस तरह देखा: https://github.com/chartjs/Chart.js/pull/1064

Answer 5

यह Chart.js की तरह लगता है को समझ नहीं सकता करने के लिए जो दिशा:

var chart = new Chart(canvas.getContext("2d"), { 
    type: 'line', 
    data: chartData, 
    options: { 
     responsive: true, 
     tooltips: { 
      callbacks: { 
       title: function(tooltipItems, data) { 
        return tooltipItems[0].xLabel; 
       }, 
       label: function(tooltipItems, data) { 
        return tooltipItems.yLabel; 
       }, 
      } 
     }, 
    }, 
}); 

वहाँ एक ठीक उपलब्ध है कि अभी तक इस परियोजना में विलय कर दिया गया प्रतीत होता है टूलटिप दिखाएं क्योंकि यह टूलटिप तत्व के आकार का पता नहीं लगा सकता है जब यह कैनवास से आगे बढ़ाता है।

मेरी परिदृश्य में मैं इस विशेष टूलटिप के अंदर का पाठ टूलटिप विकल्प के लिए इन विकल्पों के साथ करीब से निचोड़कर यह तय वस्तु:

 tooltips.titleMarginBottom = 1; 
     tooltips.bodySpacing = 1; 
     tooltips.yPadding = 2; 

Wierdly पर्याप्त Chart.js तो सही ढंग से बाईं ओर टूलटिप दिखाने का निर्णय लेता माउस के नीचे और नीचे नहीं। शांत होगा अगर आप माउस की तुलना में टूलटिप की ओर से कौन सी दिशा प्रकट कर सकते हैं चुन सकते हैं।

Answer 6

आप चार्ट में आंतरिक पैडिंग जोड़ सकते हैं। उदाहरण के लिए मेरे मामले में मेरे पास दाईं ओर टूलटिप्स का कट था।

    options: { 
        responsive: true, 
        maintainAspectRatio: false, 
        cutoutPercentage: 60, 
        legend: { 
         display: false 
        }, 
        animation: { 
         animateRotate: false 
        }, 
        layout: { 
         padding: { 
          right: 40 
         } 
        } 
       }