chart.js ग्राफ में टूलटिप्स कैसे जोड़ें

Question

मैं एक वेबपैप पर काम कर रहा हूं और मैंने हाल ही में चार्ट चार्ट के साथ Google चार्ट को बदल दिया है क्योंकि यह दृष्टि से अधिक आकर्षक है। हालांकि, मैंने जो नुकसान उठाया वह यह है कि अब मुझे डेटा पॉइंट्स के ऊपर टूलटिप्स नहीं मिल सकते हैं। मैं सोच रहा था कि अगर कोई जानता है कि यह कैसे किया जा सकता है क्योंकि मैं जावास्क्रिप्ट के साथ नौसिखिया हूं।

var data = { 
      labels : graphData[0], 
      datasets : [ 
       { 
        fillColor : "rgba(200,160,100,0.5)", 
        strokeColor : "rgba(80,240,70,1)", 
        pointColor : "rgba(80,240,70,1)", 
        pointStrokeColor : "#fff", 
        data : graphData[3] 
       }, 
       { 
        fillColor : "rgba(220,220,220,0.5)", 
        strokeColor : "rgba(220,220,220,1)", 
        pointColor : "rgba(220,220,220,1)", 
        pointStrokeColor : "#fff", 
        data : graphData[1] 
       }, 
       { 
        fillColor : "rgba(151,187,205,0.5)", 
        strokeColor : "rgba(151,187,205,1)", 
        pointColor : "rgba(151,187,205,1)", 
        pointStrokeColor : "#fff", 
        data : graphData[2] 
       } 
      ] 
     }; 

     var options = { 
      scaleShowGridLines : true, 
      scaleShowLabels : true, 
      animationSteps : 150, 
      scaleOverride: true, 
      scaleSteps : Math.max.apply(Math, graphData[3]), 
      scaleStepWidth : 1, 
      scaleStartValue : 1 
     }; 

     var ctx = document.getElementById("chart_div").getContext("2d"); 
     ctx.canvas.width = Math.max(graphData[0].length * 60, 600); 
     var myNewChart = new Chart(ctx).Line(data,options); 
     $('#chart_area').fadeIn(); 
     $('html, body').animate({ 
      scrollTop: $("#picture_area").offset().top 
     }, 1000); 

Answer 1

एक chartjs टूलटिप के साथ उपलब्ध संस्करण आप इस GitHub पेज https://github.com/Regaddi/Chart.js/tree/tooltips

ऊपर के लिंक की तरह लग रहा में प्राप्त कर सकते हैं नहीं है अब और नहीं कर रहा है: यहाँ ग्राफ के लिए कोड और सेटिंग है उपलब्ध

हालांकि Github

में अपनी उपलब्ध here

आप प्रलेखन देख सकते हैं here

Answer 2

आपको सिर्फ https://github.com/nnnick/Chart.js/blob/master/Chart.min.js से Chart.min.js की प्रतिलिपि बनाना है।

Answer 3

var ctx = document.getElementById("canvas").getContext("2d"); 
    window.myLine = new Chart(ctx).Line(lineChartData, { 
     responsive: true, 
     showTooltips: true, 
     multiTooltipTemplate: "<%= value %>", 
    }); 

चार्टज़ में ग्लोबल सेटिंग्स सेट करने के लिए इसका उपयोग करें।