लाइनचार्ट में अलग-अलग बिंदुओं पर क्लिक करते समय बूटस्ट्रैप मोडल दिखा रहा है लेकिन बरचर्ट

Question

में अलग-अलग बार में नहीं, मैं चार्ट जेएस में टूलटिप के बजाय अलग-अलग बार क्लिक करते समय बूटस्ट्रैप मोडल दिखाने की कोशिश कर रहा हूं।

मैंने लाइन चार्ट में विशेष एक्स मानों पर क्लिक करने के लिए बूटस्ट्रैप मोडल दिखाने के लिए कोड लिखा है। लेकिन यह बरचार्ट के साथ काम नहीं करता है जब मैं लाइनसेट को उसी डेटासेट के साथ बरकरार करने के लिए बदल जाता हूं। जहां तक ​​मुझे पता है, डायपरेंस बी/डब्ल्यू लाइनचार्ट और बार चार्ट ग्राफिकल प्रतिनिधित्व और विज़ुअलाइजेशन है। अगर गलत है तो कृपया सही करें।

छवि फ़ाइल:

Screenshot of output which i explained above

HTML:

<div class="chart1"> 
    <canvas id="chart" width="300" height="150"></canvas> 
</div> 

<!-- Modal --> 
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
      <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     You clicked in June 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 
    </div> 
</div> 

<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     You clicked in May 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
     </div> 
    </div> 
    </div> 

JavaScript:

<script type="text/javascript"> 

    var data = { 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
    datasets: [{ 
     label: "My First dataset", 
     fillColor: "rgba(220,220,220,0.2)", 
     strokeColor: "rgba(220,220,220,1)", 
     pointColor: "rgba(220,220,220,1)", 
     pointStrokeColor: "#fff", 
     pointHighlightFill: "#fff", 
     pointHighlightStroke: "rgba(220,220,220,1)", 
     data: [65, 59, 80, 81, 56, 55, 40] 
    }, { 
     label: "My Second dataset", 
     fillColor: "rgba(151,187,205,0.2)", 
     strokeColor: "rgba(151,187,205,1)", 
     pointColor: "rgba(151,187,205,1)", 
     pointStrokeColor: "#fff", 
     pointHighlightFill: "#fff", 
     pointHighlightStroke: "rgba(151,187,205,1)", 
     data: [28, 48, 40, 19, 86, 27, 90] 
    }] 
    }; 

    var canvas = document.getElementById("chart"); 
    var ctx = canvas.getContext("2d"); 
    var chart = new Chart(ctx).Line(data, { 
    responsive: true 
    }); 


    canvas.onclick = function(evt) { 
    var points = chart.getPointsAtEvent(evt); 
    var value = chart.datasets[0].points.indexOf(points[0]); 
    if(value == 5){ 
     $('#myModal').modal('show'); 
    } else if(value == 4){ 
     $('#myModal1').modal('show'); 
    } 


    }; 

</script> 

इस कोड लाइनचार्ट में पूरी तरह से ठीक काम करता है, लेकिन मैं Barchart में एक ही चाहते हैं जो मैं कोशिश की लेकिन आउटपुट नहीं मिला।

Answer 1

getPointsAtEvent

के बजाय getBarsAtEvent का उपयोग करें