在单击按钮时向高图表添加选项

Adding options to the Highcharts on button click

本文关键字：高图表 添加 选项 单击 按钮      更新时间：2023-09-26

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

$(document).ready(function() {
chart = new Highcharts.Chart({
    chart: { renderTo:'chart_container' }, 
    series: [{ data: [[20, 20], [80, 80]] }]
});

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

scrollbar: {
    enabled: true
},

scrollbar: {
enabled : true
}

这无法从外部添加或单击。

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

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

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

希望这对你有用

作为工作对象是可能的。- 启用滚动条- 隐藏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/

我终于做到了：

click() =>
   Highcharts.setOptions({scrollbar:{enabled:true}});
   var chartOptions = chart.options;
   chart.destroy();
   var chart1 = new Highcharts.Chart(chartOptions);

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

如果定义了最小最大值（TX 前锋），则有效

相关文章：