Javascript Highcharts图表在zoomType上变为空白:';x';区域范围变焦?

Javascript Highcharts图表在zoomType上变为空白:';x';区域范围变焦?,javascript,html,charts,highcharts,Javascript,Html,Charts,Highcharts,好的,我有一个Highcharts图表,正确地显示了数据库中的数据;但是当我放大的时候,图表变成了空白 以下是图表HTML: <div class="content" id="content"></div> 以下是图表的Javascript代码: $(function () { $('#content').highcharts({ chart: { zoomType: 'x',

好的,我有一个Highcharts图表,正确地显示了数据库中的数据;但是当我放大的时候,图表变成了空白

以下是图表HTML:

<div class="content" id="content"></div>

以下是图表的Javascript代码:

$(function () {
        $('#content').highcharts({
            chart: {
                zoomType: 'x',
                backgroundColor:'transparent'
            },
            credits: {
                enabled: false
            },
            title: {
                text: 'Players Online'
            },
            subtitle: {
                text: document.ontouchstart === undefined ?
                    'Click and drag in the plot area to zoom in' :
                    'Drag your finger over the plot to zoom in'
            },
            xAxis: {
                type: 'datetime',
                maxZoom: 3600000, // 1 hour
                title: {
                    text: null
                }
            },
            yAxis: {
                title: {
                    text: 'Players Online'
                }
            },
            tooltip: {
                enabled: false
            },
            legend: {
                enabled: false
            },
            plotOptions: {
                area: {
                    allowPointSelect: false,
                    fillColor: {
                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
                        stops: [
                            [0, Highcharts.getOptions().colors[0]],
                            [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                        ]
                    },
                    lineWidth: 1,
                    marker: {
                        enabled: false
                    },
                    shadow: false,
                    states: {
                        hover: {
                            lineWidth: 1,
                            enabled: false
                        }
                    }
                }
            },
            series: [{
                type: 'area',
                data: [<?php echo join($data, ',') ?>]
                //This is displayed correctly in Javascript, so the issue isn't in my PHP
            }]
        });
    });
$(函数(){
$(“#内容”)。高图({
图表:{
zoomType:'x',
背景颜色:'透明'
},
学分:{
已启用:false
},
标题:{
文字:“玩家在线”
},
副标题:{
text:document.ontouchstart==未定义?
'在绘图区域中单击并拖动以放大':
'将手指拖动到绘图上以放大'
},
xAxis:{
键入:“日期时间”,
最大缩放:3600000,//1小时
标题:{
文本:空
}
},
亚克斯:{
标题:{
文字:“玩家在线”
}
},
工具提示:{
已启用:false
},
图例:{
已启用:false
},
打印选项:{
面积:{
allowPointSelect:false,
填充颜色:{
线性半径:{x1:0,y1:0,x2:0,y2:1},
停止:[
[0,Highcharts.getOptions().Color[0]],
[1,Highcharts.Color(Highcharts.getOptions().colors[0])。setOpacity(0)。get('rgba')]
]
},
线宽:1,
标记:{
已启用:false
},
影子:错,
国家:{
悬停:{
线宽:1,
已启用:false
}
}
}
},
系列:[{
类型:'区域',
数据:[]
//这在Javascript中正确显示,因此问题不在我的PHP中
}]
});
});

我在做什么蠢事吗?似乎无法找到图表变为空白的原因:/

在浏览Highcharts API文档之后,我找到了问题所在

据我所知,所有图表类型都有一个名为“cropThreshold”的属性,下面是Highcharts API的链接,详细说明了这一点:

但总而言之;如果显示的点数超过300(cropThreshold默认为300),则放大时,图表将变为空白。要更正此问题,可以将以下内容添加到图表配置中:

area: {
           cropThreshold: 500 <- //Vary this. I display 500 points on my chart in
                                 //total and so a value of 500 allows zooming to
                                 //work at all levels. This will vary for you
                                 //depending on how many points you plot.
      }
区域:{

cropThreshold:500可能重复您是否按x升序对数据进行了排序?是否可以附加您的数据对象?@SebastianBochan我链接了使用图表的网站,以便您可以实时查看其中的数据。我打开了您的示例并通过x进行了缩放,您使用的是哪种浏览器?@SebastianBochan,我实际上自己找到了解决方案呃,在Highcharts API文档中搜索。我已经添加了答案。我刚刚在API中看到,他们告诉我,如果溢出cropthreshold,那么点将被减少到cropthreshold大小,默认情况下为300,那么图表怎么可能变为空白…?@user2634485这也是我对API的理解。但是当我没有cropThreshold设置为高于我的点数,放大时图表将变为空白。可能是我的特定配置有错误,或者是我的某个地方有错误。从那以后我就没有遇到过这种情况,所以我猜这是一个错误。