Bartartの個々のバーではなく、Linechart内の個々のポイントをクリックすると表示されるブートストラップモーダル

Question

チャートjsのツールチップではなく個々のバーをクリックすると、ブートストラップモーダルを表示しようとしています。

折れ線グラフの特定のx値をクリックすると、ブートストラップモーダルを表示するためのコードを記述しました。しかし、同じデータセットでbarchartにlinecchartに変更したとき、barchartではうまくいきません。限り、私が知っている、diiference b/wの線図と棒グラフは、グラフィカルな表現と視覚化です。間違っている場合は修正してください。

画像ファイル：

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> 

た私は、このコードは折れ線グラフに完全に正常に動作しますが、私は棒グラフで同じことをしたいです試しましたが、出力が得られませんでした。

Answer 1

getPointsAtEventの代わりにgetBarsAtEventを使用します。