javascript - 添加 html 按钮并选择到 Highcharts

Question

我想将自定义按钮添加到 Highcharts 图表的标题区域。我的目标是制作按钮和图表的此类部分，而不是其上方或下方的 div。我在大部分情况下都可以正常工作，但是当向标题区域添加选择框然后单击打开它时，没有任何反应。

$(function() {
  $('#container2').highcharts({
    chart: {
      events: {
        load: function() {
          loadChartButtons();
        }
      }
    },
    title: {
      text: 'loading',
      align: 'right',
      x: -50,
      useHTML: true
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
    },
    series: [{
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0]
    }],

  });
});


function loadChartButtons() {
  var element1 = '<button id="testbtn" class="btn btn-primary">Test</button>';
  var element2 = '<select id="testselect"><option>test1</option><option>test2</option><option selected>test3</option></select>';
  $('#container2 span.highcharts-title').html(element1 + ' ' + element2);
}

这是我迄今为止所掌握的一些内容:http://jsfiddle.net/quyx7L0m/

Answer 1

Highcharts 捕获图表容器中的所有事件。您可以创建一个换行，这将为 select 元素创建一个异常(exception)。

Highcharts.wrap(Highcharts.Pointer.prototype, 'onContainerMouseDown', function(proceed, e) {

    var popupClass = e.target && e.target.className;

    // elements is not in popup
    if (!(Highcharts.isString(popupClass) &&
            popupClass.indexOf('highcharts-title-select') >= 0)) {

        proceed.apply(this, Array.prototype.slice.call(arguments, 1));
    }
});

现场演示:http://jsfiddle.net/BlackLabel/60x45wsg/