Highchart中的缩放选项不适用于大量数据

时间:2015-08-19 06:16:08

标签: javascript jquery html asp.net-mvc highcharts

我需要用jquery创建一个高图。我已将Zoom类型指定为x。当存在大量数据时,图表中的缩放选项不起作用。 在我的X轴中,我将有日期值:

以下是我的图表实施:

 // Global chart options
Highcharts.setOptions({
            chart: {
                borderRadius: 0,
                borderWidth: 1,
                borderColor: '#DADCE0',
                marginRight: 45,
                zoomType: 'x',
                width: 600,
                height: 400

            },
            credits: {
                enabled: false
            },
            xAxis: {
                type: 'datetime',
                minRange: 8 * 24 * 3600000,
                labels: {
                    format: '{value:%m-%d-%Y}', //'{value:%m-%d-%Y}'
                    rotation: 45
                }
            },
            plotOptions: {
                series:{
                    fillOpacity:0.1
                },
                spline: {
                    marker: {
                        enabled: false,
                        symbol: 'circle',
                        radius: 2,
                        states: {
                            hover: {
                                enabled: true
                            }
                        }
                    },
                    lineWidth: 1,
                    threshold: null
                },
                area: {
                    marker: {
                        enabled: false,
                        symbol: 'circle',
                        radius: 2,
                        states: {
                            hover: {
                                enabled: true
                            }
                        }
                    },
                    lineWidth: 1,
                    threshold: null
                }
            },
            global: {
                useUTC: false
            }
        });
         var chartJobCount = new Highcharts.Chart({
            chart: {
                renderTo: 'container-segementReport',
                type: 'areaspline'
            },
            colors: ['#0D4F8B','#00CCFF', '#ff0000', '#ff69b4','#663399','#ffa500','#006400','#654321'],
            title: {
                text: 'Segments (Classic)'
            },
          yAxis: {
                title: {
                    text: 'Production Ratio'
                },
                labels: {
                    formatter: function () {
                        return Highcharts.numberFormat(this.value, 0, '', ',');
                    }
                }
            },
            tooltip: {
                formatter: function () {
                    return '<b>' + this.series.name + ' </b> <br/> Date : <b>' + Highcharts.dateFormat('%m-%d-%Y', this.x) + ' </b> <br/>  Production Ratio: <b>' + this.y + '</b>';
                }

            },

            series: getProductionRatio() --// This function will get the data for series
        });

当我尝试缩放图表时,图表中的内容会被隐藏。

X-Axis的点间隔中是否需要注意什么?

提前致谢!

0 个答案:

没有答案