Visualizzazione modale bootstrap quando si fa clic su singoli punti in Linechart ma non in barre individuali in Barchart

Question

Sto tentando di mostrare un modal bootstrap quando si fa clic su singole barre invece di tooltip nel grafico js.

Ho scritto il codice per mostrare un modal bootstrap facendo clic sui particolari valori x nel grafico a linee. Ma non funziona con il barchart quando ho cambiato linechart in barchart con gli stessi dataset. Per quanto ne so, la diiferenza in bianco e nero e il grafico a barre è la rappresentazione grafica e la visualizzazione. Si prega di correggere se ho torto.

file immagine:

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> 

Questo codice funziona perfettamente bene in Linechart ma voglio lo stesso in Barchart cui ho provato ma non ha ottenuto l'output.

Answer 1

utilizzare getBarsAtEvent anziché getPointsAtEvent