当单击折线图中的单个点而不是条形图中的单个条时显示引导模式答案

【问题标题】：Bootstrap modal showing when clicking individual points in Linechart but not in individual bars in Barchart当单击折线图中的单个点而不是条形图中的单个条时显示引导模式
【发布时间】：2021-09-29 18:22:07
【问题描述】：

我试图在单击图表 js 中的单个条而不是工具提示时显示引导模式。

我已经编写了代码，用于在单击折线图中的特定 x 值时显示引导模式。但是当我将 linecchart 更改为具有相同数据集的条形图时，它不适用于条形图。据我所知，黑白线图和条形图的区别是图形表示和可视化。如有错误请指正。

图片文件：

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>

此代码在 Linechart 中工作得非常好，但我想要在 Barchart 中使用相同的代码，我尝试过但没有得到输出。

【问题讨论】：

标签： javascript html twitter-bootstrap chart.js

【解决方案1】：

使用 getBarsAtEvent 代替 getPointsAtEvent

【讨论】：