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

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

$(document).ready(function() {

chart = new Highcharts.Chart({

    chart: { renderTo:'chart_container' }, 

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

现在，在页面的其他地方单击一个按钮，将滚动条选项添加到图表中

scrollbar: {
    enabled: true
},

无法从外侧添加或单击

但是如果你使用highstock yes，你可以得到一个滚动条，但不像上面那样

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

这里有一个例子

希望这对您有用

我终于做到了：

click() =>

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

   var chartOptions = chart.options;

   chart.destroy();

   var chart1 = new Highcharts.Chart(chartOptions); 

其中chart是不带滚动条的旧图表

---

如果定义了最小-最大值（tx罢工者）

则可以工作。 -启用滚动条 -隐藏svg元素 -如果需要显示滚动条，请在元素上调用show函数

回拨：

 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]();
              });

  };

例如：

---

高图还是高库？我认为滚动条选项只在highstock中。对不起，Highcharts/highstock中没有方法实时更新滚动条之类的选项。唯一的解决方案是：a）销毁并重新创建图表b）在源代码中查找scroller是如何初始化的，并尝试自己实现这一点诚实、奇怪的解决方法，但如果它工作正常的话。

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]();
              });

  };