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

我正在使用chart.js开展一个项目.我想在图表js中单击单个条而不是工具提示时显示引导模式.现在我正在使用chart 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>

解决方法:

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');
    }


  };

标签：bootstrap-modal,javascript,jquery,chart-js,twitter-bootstrap
来源： https://codeday.me/bug/20190824/1706293.html