单击 chart.js 中的各个栏时如何显示 Bootstrap 模态

Question

我正在使用 chart.js 进行一个项目。我试图在单击图表 js 中的各个条而不是工具提示时显示 bootstrap 模式。现在我正在使用图表 ID 的 onclick 函数来显示 bootstrap 模态。有什么办法可以实现吗？

这是我的代码：

HTML:

   <div class="chart1">
     <canvas id="barchart5"></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">
        ...
      </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>

JAVASCRIPT :

 <script type="text/javascript">
   var data5 ={
   labels: ["Label1", "Label2", "Label3", "Label4", "Label5", "Label6", "Label7", "Label8"],
   datasets : [
   {
     fillColor : "#F64747",
     strokeColor : "#F64747",
     highlightFill: "#F64747",
     highlightStroke: "#F64747",
     data: [4, 6, 3, 2, 10, 5, 5, 7]
   },
   {
     fillColor : "#19B5FE",
     strokeColor : "#19B5FE",
     highlightFill : "#19B5FE",
     highlightStroke : "#19B5FE",
     data: [3, 6, 4, 3, 10, 10, 5, 8]
  },
  {
    fillColor : "#F7CA18",
    strokeColor : "#F7CA18",
    highlightFill : "#F7CA18",
    highlightStroke : "#F7CA18",
    data: [4, 6, 10, 4, 7, 6, 2, 4]
  }
]
};

 var ctx = document.getElementById("barchart5").getContext("2d");
 var barchart5 = new Chart(ctx).Bar(data5, {

 responsive : true,
 showTooltips: false,

 onAnimationComplete: function () {
 var ctx = this.chart.ctx;
 alert(ctx);
 ctx.font = this.scale.font;
 ctx.fillStyle = this.scale.textColor
 ctx.textAlign = "center";
 ctx.textBaseline = "bottom";

 this.datasets.forEach(function (dataset) {
  dataset.bars.forEach(function (bar) {
    ctx.fillText(bar.value, bar.x, bar.y);
    });
   })
 }
 });


$( "#barchart5" ).click(function() {
    $('#myModal').modal('show');
  });
 </script>

Answer 1

看到这个，

Click events on Pie Charts in Chart.js

不太了解 chart.js 但我确信这个库有一些方法可以轻松地做到这一点，不需要使用 jquery.

Answer 2

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


  };

单击 chart.js 中的各个栏时如何显示 Bootstrap 模态

How can I show Bootstrap modal when on click in individual bars in chart.js

javascript

jquery

twitter-bootstrap

bootstrap-modal

chart.js