Question

我设置的列范围图表工作得很好。我使用ajax获取所需的数据，并在每次用户点击事件时重新创建图表。我试图添加x轴滚动条，但它不是gporperly工作。我必须将js import更改为highstock。如果我将min值设为任何数字，它就不起作用。 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

on jsfiddle

Answer 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);
    }

Highcharts滚动条无法正常工作

1 个答案: