जावास्क्रिप्ट चार्ट.जेएस - टूलटिप

Question

पर प्रदर्शित करने के लिए कस्टम डेटा स्वरूपण मैंने यहां विभिन्न दस्तावेज और इसी तरह के प्रश्नों को देखा है, लेकिन विशेष समाधान नहीं मिल रहा है। क्षमा करें अगर मैंने कुछ भी स्पष्ट किया है या इस सवाल को दोहराया है!

पृष्ठभूमि की थोड़ी सी जानकारी के रूप में, मैंने चार्ट.जेएस प्लगइन का उपयोग करके 4 ग्राफ लागू किए हैं और डेटाबेस से PHP का उपयोग करके आवश्यक डेटा में पास किया है। यह सब ठीक से काम कर रहा है और ठीक है।

मेरी समस्या है कि मुझे टूलटिप्स में डेटा स्वरूपित डेटा उर्फ ​​के रूप में प्रदर्शित करने की आवश्यकता है। % के साथ संख्यात्मक के रूप में। उदाहरण के तौर पर, डेटाबेस से मेरा डेटा में से एक है -0.17222। मैंने इसे अपनी तालिका में प्रदर्शित करने के प्रतिशत के रूप में स्वरूपित किया है और सब ठीक है। हालांकि, chart.js बार ग्राफ़ के लिए डेटा सेट करते समय, डेटा स्पष्ट रूप से इस स्वरूपण को याद कर रहा है और -0.17222 के रूप में प्रदर्शित होता है जो मैं नहीं चाहता हूं।

क्षमा करें, मैं एक तस्वीर पोस्ट करना चाहता था, लेकिन मेरी प्रतिष्ठा बहुत बकवास है!

मैं डेटाबेस से डेटा हड़पने, तो मेरी तालिका में सेट करें:

var kpiRex = new Handsontable(example1, { 
    data: getRexData(), 

तब मैं चार्ट अनुभाग में ऐसा तरह इस डेटा फ़ीड:

data: kpiRex.getDataAtRow(3) 

किसी भी मदद की बहुत अच्छा होगा! मैं इस पर घंटों तक फंस गया हूं और शायद यह वास्तव में कुछ आसान है जिसे मैं देख रहा हूं।

Answer 1

आप इस तरह अपने चार्ट विकल्पों में एक कस्टम टूलटिप टेम्पलेट निर्दिष्ट करना:

// String - Template string for single tooltips 
tooltipTemplate: "<%if (label){%><%=label %>: <%}%><%= value + ' %' %>", 
// String - Template string for multiple tooltips 
multiTooltipTemplate: "<%= value + ' %' %>", 

इस तरह अगर है कि तुम क्या चाहते हो तो आप अपने मूल्यों के बाद एक '%' पर हस्ताक्षर जोड़ सकते हैं।

यहां a jsfiddle to illustrate this है।

ध्यान दें कि tooltipTemplate लागू होता है अगर आप केवल एक डाटासेट है, multiTooltipTemplate लागू होता है अगर आप कई डेटासेट की है।

इस विकल्प का उल्लेख global chart configuration section of the documentation में किया गया है। एक नज़र डालें, यह उन सभी अन्य विकल्पों की जांच करने लायक है जिन्हें वहां अनुकूलित किया जा सकता है।

ध्यान दें कि आपके डेटासेट में केवल संख्यात्मक मान होना चाहिए। (वहां कोई% संकेत या अन्य सामान नहीं है)।

Answer 2

आप tooltipTemplate एक समारोह दे सकते हैं, और टूलटिप प्रारूप के रूप में आप चाहते हैं:

tooltipTemplate: function(v) {return someFunction(v.value);} 
multiTooltipTemplate: function(v) {return someOtherFunction(v.value);} 

उन दिए गए 'वी' तर्क 'मान' संपत्ति के अलावा बहुत सी जानकारी होते हैं। आप उस फ़ंक्शन के अंदर 'डीबगर' डाल सकते हैं और स्वयं का निरीक्षण कर सकते हैं।

let that = this; 
    options = { 
    legend: { 
     display: false, 
     responsive: false 
    }, 
    tooltips: { 
     callbacks: { 
     label: function(tooltipItem, data) { 
      let account: Account = that.accounts[tooltipItem.index]; 
      return account.accountNumber+":"+account.balance+"€"; 
     } 
     } 
    } 
    } 

Answer 3

chart.js 2.1.6 में, मैं कुछ इस तरह (टाइपप्रति में) किया था।

options: { 
    tooltips: { 
     callbacks: { 
      label: function(tooltipItem, data) { 
       return tooltipItem.yLabel; 
      } 
     } 
    } 
} 

यानी, आप tooltipItem.yLabel, जो y- अक्ष मूल्य रखती है के लिए संशोधन लौट सकते हैं: उन है कि सिर्फ वर्तमान, अस्वरूपित मूल्य पहुँच सकते हैं और यह फेरबदल शुरू करना चाहते हैं के लिए, डिफ़ॉल्ट टूलटिप के समान है। मेरे मामले में, मैं एक वित्तीय चार्ट के लिए एक डॉलर चिह्न, राउंडिंग, और हजारों के लिए अल्पविराम जोड़ना चाहते थे, इसलिए मैं प्रयोग किया है:

options: { 
    tooltips: { 
     callbacks: { 
      label: function(tooltipItem, data) { 
       return "$" + Number(tooltipItem.yLabel).toFixed(0).replace(/./g, function(c, i, a) { 
        return i > 0 && c !== "." && (a.length - i) % 3 === 0 ? "," + c : c; 
       }); 
      } 
     } 
    } 
} 

Answer 4

chart.js 2.0+ के लिए, यह बदल गया है (और नहीं tooltipTemplate/multiTooltipTemplate):

Answer 5

tooltips: { 
      enabled: true, 
        mode: 'single', 
        callbacks: { 
        label: function(tooltipItems, data) { 
         return data.datasets[tooltipItems.datasetIndex].label+": "+tooltipItems.yLabel; 
        } 
        } 
       }