Highcharts图表在zoomType上为空：'x'区域范围缩放？

问题描述

好的，所以我有一个Highcharts图表从数据库正确显示数据;但是我放大的时候，图表是空白的？

Ok, so I have a Highcharts chart displaying data correctly from a database; but the moment I zoom in, the chart goes blank?

这是图表HTML：

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

以下是图表的Javascript代码：

Here is the Javascript code for the chart:

$(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
            }]
        });
    });

我在这里做蠢事吗？似乎找不到图表的原因空白。 ：/

Am I doing something stupid here? Can't seem to find the cause of the chart going blank. :/

推荐答案

我通过Highcharts API文档找到了什么问题。

I worked out what the issue was after hunting through the Highcharts API documentation.

我知道所有图表类型的属性称为cropThreshold，这里是到Highcharts API的链接，解释这是什么详细的：

There is a property of all chart types that I'm aware of called 'cropThreshold', here is the link to the Highcharts API explaining what this is in detail:http://api.highcharts.com/highcharts#plotOptions.area.cropThreshold

但总而言之;如果显示超过300点（cropThreshold默认值为300），则放大时，图表将为空。要更正此问题，您可以将以下内容添加到图表配置中：

But in summary; if you display more than 300 points (cropThreshold defaults to 300), then when zooming in, your chart will go blank. To correct this, you can add the following to your chart configuration:

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.
      }

这篇关于Highcharts图表在zoomType上为空：'x'区域范围缩放？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！