Добавьте кнопки HTML и выберите в Highcharts

Question

Я хочу добавить пользовательские кнопки в область заголовка диаграммы Highcharts.Моя цель - сделать кнопки и такую ​​часть графика, а не делить ее выше или ниже.У меня это работает по большей части, но при добавлении поля выбора в область заголовка и последующем нажатии, чтобы открыть его, ничего не происходит.

$(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.

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/