Question

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

$(document).ready(function() {

chart = new Highcharts.Chart({

    chart: { renderTo:'chart_container' }, 

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

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

scrollbar: {
    enabled: true
},

Answer 1

scrollbar: {
enabled : true
}

无法从外侧添加或点击。

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

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

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

希望这对你有用

Answer 2

我终于成功了：

click() =>

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

   var chartOptions = chart.options;

   chart.destroy();

   var chart1 = new Highcharts.Chart(chartOptions);

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

如果min max defined（tx strikers）

，它会起作用

Answer 3

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

回调：

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

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

function enableScroll

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/

在按钮单击上向Highcharts添加选项

3 个答案: