在zoomType:'x'区域范围缩放时，Highcharts图表变空白？

Question

在zoomType:'x'区域范围缩放时，Highcharts图表变空白？

4

好的，我有一个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
            }]
        });
    });

我这里有什么做得不对吗？图表似乎一直显示为空白。:/

- user2284433

1

可能是重复问题 https://dev59.com/5mXWa4cB1Zd3GeqPNHrh - svillamayor

你按照 x 升序排列了数据吗？你能附上你的 Data 对象吗？ - Sebastian Bochan

@SebastianBochan 我已经链接了网站，你可以在上面实时查看图表中的数据。 - user2284433

我打开了你的示例，通过x缩放正常工作，你使用哪个浏览器？ - Sebastian Bochan

@SebastianBochan 啊，我在查阅 Highcharts API 文档后自己找到了解决方案。我已经添加了答案。 - user2284433

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user2284433 · Accepted Answer

通过查阅Highcharts API文档，我找到了解决问题的方法。

所有图表类型都有一个名为“cropThreshold”的属性。这是Highcharts API解释这个属性的链接： http://api.highcharts.com/highcharts#plotOptions.area.cropThreshold 简单来说，如果显示超过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.
      }