Highcharts 滚动条无法正常工作答案

【问题标题】：Highcharts scrollbar not working properlyHighcharts 滚动条无法正常工作
【发布时间】：2013-06-25 15:09:37
【问题描述】：

我设置了列范围图，它工作得非常好。我使用 ajax 获取所需的数据，并在每次用户点击事件时重新创建图形。我正在尝试添加 x 轴滚动条，但它无法正常工作。我必须将 js 导入更改为 highstock。如果我将最小值更改为任何数字，它就不起作用。 data.cat 带回了 32 个类别，如果没有滚动功能，它看起来都被压扁了。

这是图表

$('#projects').highcharts({
                                        'chart':{
                                            'type':'columnrange',
                                            /* events: { 
                                                 load: function (event) { 
                                                     $('#projects').width(800); 
                                                     } 
                                                }*/
                                        },
                                        'exporting':{
                                            'enabled':true
                                            },

                                        'title':{
                                            text:'Projects in progress, '+data.asaarea
                                            },
                                        xAxis:{
                                            categories:data.cat,
                                            min: 10
                                            },
                                        'yAxis':{
                                            'title':'Date',
                                            'type':'datetime',
                                            'dateTimeLabelFormats':{                
                                                'month':'%b %Y'
                                            },
                                            'min':Date.UTC(2010,00,01)
                                        },

                                        'tooltip':{
                                            formatter: function(){
                                                var percentage = '';
                                                if(this.series.name == "Actual"){
                                                    var data = "PROJECT="+this.x + "&StartDATE="+this.point.low;

                                                    var percent = $.ajax({
                                                        url: "index.php?r=ViewWebprojectreport/getPercent",
                                                        type: "GET",
                                                       dataType:"html",
                                                        data: data,
                                                        global: false,
                                                        async:false,
                                                        success:function(data){
                                                            return data;                                            
                                                        }
                                                    }).responseText;

                                                    percentage = percent +'% Complete<br>';
                                                }
                                                return  percentage + '<b>' +this.series.name + ':</b> '+ Highcharts.dateFormat('%e %b, %Y', this.point.low) + ' - ' +  Highcharts.dateFormat('%e %b, %Y', this.point.high) +'<br/>' ;
                                                  }  
                                            },
                                        'legend':{
                                            'enabled':true
                                            },
                                        credits: {
                                            enabled: false
                                        },
                                        scrollbar: {
                                            enabled: true
                                        },
                                        'series':[
                                                    {
                                                    'name':'Forecast',
                                                    'data':data.data,
                                                    'color': 'blue' 
                                                    },
                                                    {
                                                    'name':'Actual',
                                                    'data':data.complete,
                                                    'color': 'green'    
                                                    }
                                                ]

                                    }); // end of columngraph

在jsfiddle

【问题讨论】：

什么不起作用？例如min: 25，请参阅：jsfiddle.net/4GYu3/2 工作正常。关于滚动条 - 你是对的，你需要使用 Highstock。
为什么是min:25？如果我动态更改系列中的类别和数据的数量会怎样。 min:25 不能正常显示？
但是你期待什么？ Highcharts 不会仅仅因为您启用了滚动条而计算任何东西来使图表更宽。我认为您需要设置例如max: categories.length > 5 ? 5 : categories.length，因此您将有条件是否设置最大值（滚动条也是如此）。其中 categories 是所有类别的变量。
您是否检查过此答案是否适合您？ stackoverflow.com/a/11464098
同意帕维尔的意见。为了启用滚动条，我们首先需要添加 highstock.js 和我们需要添加的第二件事 (scrollbar:{enabled:true} 并在 xAxis: 中添加 max 和 min 属性。它应该可以工作。

标签： javascript highcharts scrollbar

【解决方案1】：

<script
    type="text/javascript"
    src="<?php echo Yii::app()->request->baseUrl; ?>/js/highcharts/highstock.js"></script>

<script
    type="text/javascript"
    src="<?php echo Yii::app()->request->baseUrl; ?>/js/highcharts/highcharts-more.js"></script>
<script
    type="text/javascript"
    src="<?php echo Yii::app()->request->baseUrl; ?>/js/highcharts/modules/exporting.js"></script>

我已经包含了必要的 jscripts。为了制作动态滚动条，我使用 JQuery 来增加 div 长度。图的容器

<div id="weekly_status_graph" style="height:800px;display:none;width: 1120px;padding-top: 20px;"></div>
<div id="weekly_status_graph_line" style="height:800px;display:none;width: 1120px;padding-top: 20px;"></div>
<div id="weekly_status_graph_dialog" style="height:800px;display:none;width: 1120px;padding-top: 20px;"></div>

适当调整大小

if(data.type == "column"){
        $('#weekly_status_graph_line').hide();
        $('#weekly_status_graph').show();       
        columnGraph(data);
    }else if(data.type == "line"){
        $('#weekly_status_graph').hide();
        $("#weekly_status_graph_line").css("width","1830px");
        $("#weekly_status_graph_line").css("margin-left","-0px");
        $('#weekly_status_graph_line').show();      
        lineGraph(data);
    }

【讨论】：