从 highcharts x 轴标签触发引导模式？答案

【问题标题】：Fire bootstrap modal from a highcharts x axis label?从 highcharts x 轴标签触发引导模式？
【发布时间】：2014-08-04 19:34:01
【问题描述】：

我有一个以 xaxis 标签作为链接的折线图。当我点击它们时，我想打开一个小的引导模式。现在我将它们作为链接单击，但它们只是触发到新页面并且不打开模式。当我查看页面源代码时，它看起来像是正确构建了链接。有人知道怎么做吗？

我的 Highcharts 函数的 X 轴：

xAxis: {
          title: {
            text: 'Stock Price'
          },
          labels:{
            rotation: -45,
            formatter: function(){
              return '<a data-toggle="modal" href="details?price=' + this.value + '" data-target="#myModal">' + '$ ' + this.value + '</a>';
            },
            useHTML: true
          },
          categories: [#{strikeprices}]
        },

你不能在页面的javascript中以这种方式构建模态链接并且仍然触发它吗？

感谢您的帮助！

【问题讨论】：

标签： jquery twitter-bootstrap highcharts twitter-bootstrap-3 bootstrap-modal

【解决方案1】：

根据this comment 和this fiddle，处理它的适当方法是找出访问标题上正在使用哪些元素/类，并使用jQuery 向它们添加侦听器以触发模态。所以像

$('elements that wrap the title').on('click', function() {
  $('#modalID').modal('show');
});

您应该能够通过右键单击标题并执行“检查元素”来获取 Chrome 中的元素。

【讨论】：

所以在检查单个链接时，只有我创建的链接根本没有元素：$ 17.5 但是，在涵盖所有这些链接的 div 上，有这样的：
。我会为 onclick 使用这些类之一吗？
我实际上是按照您所说的链接不再起作用的方式做到了。不确定我是否有早期版本的 highcharts 或者这实际上是一个安全威胁，但这适用于触发模式： formatter: function(){ return '' + '$' + this.value + ''; }，但是现在如何将 x 轴标签值发送到该模态？或者使用它来调用远程模式的 href 传递查询字符串中的值？
抱歉，这在答案中并不清楚，但您可能应该完全删除您的自定义格式化程序，然后挂钩到 highcharts 为您构建的默认元素/类。
谢谢肖恩，我可以使用下面的解决方案，但正如您提供的链接中提到的那样，这不是最佳做法吗？我不完全清楚如何在没有客户格式化程序的情况下使其可点击。

【解决方案2】：

嗯，我能够让它工作。但不确定它是否是最好的方法。我确实在 a href 标记中使用了 javascript：

xAxis: {
          title: {
            text: 'Stock Price'
          },
          labels:{
            rotation: -45,
            formatter: function(){
              return '<a href="javascript:$(\'#myModal\').modal({remote: \'/details?price=' + this.value + '\'});$(\'#myModal\').modal(\'show\');">' + '$ ' + this.value + '</a>';
            },
            useHTML: true
          },
          categories: [#{strikeprices}]
        },

注意有两个函数被调用。第一个为传递 x 轴标签值的模式设置远程 url。然后第二个触发模态。它有效，但是在这样的链接中启动 JavaScript 是不是一种不好的做法？

【讨论】：

【解决方案3】：

您可以使用custom-events 扩展，它允许在轴标签上捕获点击事件。

【讨论】：