javascript - 在按钮单击时向 Highcharts 添加选项

Question

我想在创建图表后添加滚动选项，例如：

$(document).ready(function() {

chart = new Highcharts.Chart({

    chart: { renderTo:'chart_container' }, 

    series: [{ data: [[20, 20], [80, 80]] }]
});

现在单击页面其他位置的按钮以将滚动条选项添加到图表

scrollbar: {
    enabled: true
},

Answer 1

我终于做到了：

click() =>

   Highcharts.setOptions({scrollbar:{enabled:true}});

   var chartOptions = chart.options;

   chart.destroy();

   var chart1 = new Highcharts.Chart(chartOptions); 

其中图表是没有滚动条的旧图表

如果定义了最小值最大值（tx 前锋），它就可以工作

Answer 2

scrollbar: {
enabled : true
}

无法从外部添加或单击。

但相反，如果您使用 highstock 是的，您可以获得滚动条，但不像上面那样。

您必须为 xAxis 设置最小值和最大值。这将启用滚动条

这是一个例子http://jsfiddle.net/jKgDn/1/

希望这对你有用

Answer 3

有可能作为workaournd。- 启用滚动条 - 隐藏 svg 元素 - 如果您需要显示滚动条，请在元素上调用显示功能。

打回来：

 setTimeout(function(){
          enableScroll(false);
      },1);

      $('#btn').click(function () {
          enableScroll(true);
      });

功能启用滚动

function enableScroll(vis) { 
    var chart = $('#container').highcharts(),
        s = chart.scroller,
        showHide = vis ? 'show' : 'hide';

              s.scrollbar[showHide]();
              s.scrollbarGroup[showHide]();
              s.scrollbarRifles[showHide]();
              s.scrollbarTrack[showHide]();

              $.each(s.scrollbarButtons,function(j,elem) {
                elem[showHide]();
              });

              $.each(s.elementsToDestroy, function (i, elem) {
                    elem[showHide]();
              });

  };

示例：http: //jsbin.com/USOGOtu/1/