jquery - Highstock 在小屏幕上禁用图表选项

Question

我们有一个页面，其中有几个运行实时数据的高库存图表。对于移动/较小的屏幕，我们希望禁用导航器、缩放和日期范围，并仅显示基本的 Highcharts 。仅使用媒体查询对我来说不起作用，因为我只能成功访问和禁用日期范围选择器组，而不能成功访问和禁用导航器组。 我当前的解决方案是根据加载时的屏幕大小初始化不同的图表，但这似乎有很多代码重复。

if (screen && screen.width > 480) {         
$(function () { 
$('#container').highcharts('StockChart',{ //initializes Highstock chart
  //add chart options 
...
}else{
 $('#container').highcharts({ //initializes basic Highchart chart 
{
 //add chart options
...
}

是否有更优雅的解决方案，例如将图表选项传递给 window.resize 事件或将条件添加到图表选项中并重新绘制图表？ (我的 jquery 知识有限，但我欢迎任何关于更精简、更好的代码的建议......thx)

Answer 1

您可以使用 jquery 获取容器宽度并与您的限制进行比较，例如多/少 480 像素。然后，您需要将结果返回到全局变量，该变量在特定元素的“enabled”参数中使用。

    var enable = $('#container').width() > 480;

 rangeSelector : {
                enabled: enable
            },
            scrollbar :{
                enabled: enable
            },
            navigator:{
                enabled: enable
            },

示例:http://jsfiddle.net/sbochan/f0fd6v4L/1/