0

我设置了列范围图，它工作得很好。我使用 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上

4

1 回答 1

0 
<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);
    }
于 2014-08-05T13:35:38.017 回答