Question

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

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 px /更多。然后，您需要将结果返回到全局变量，该变量在＆＃34; enabled＆＃34;中使用。特定元素的参与者。

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

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

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

Answer 2

鉴于您在加载时对屏幕尺寸最感兴趣，您可以根据屏幕或图表的宽度设置“启用”设置。例如：

var disableWidth = 500;

$('#container').highcharts('StockChart', {
    rangeSelector: {
        selected: 1,
        enabled: $('#container').width() > disableWidth,
        inputEnabled: $('#container').width() > disableWidth
    },

    navigator: {
        enabled: $('#container').width() > disableWidth
    }

    // ...
});

请参阅this JSFiddle demonstration。

Highstock禁用小屏幕上的图表选项

2 个答案: