Question

我使用Ajax获取数据，当我使用firebug调试时，结果显示highcharts选项的数据有数据。但图表无法正确呈现。图表背景正确呈现，但没有图表。

这是我的代码。

// @ author:wang
var chart;
var element;
var chart_type_element;

var y_title_1;
var y_title_2;
var y_title_3;
var date = new Date();
var y = date.getUTCFullYear();
var m = date.getUTCMonth();
var d = date.getUTCDate()-1;
var h = date.getUTCHours();
var minute = date.getUTCMinutes();

/**
 * 返回图表的类型
 * 
*/
function chart_type(element){
var type;
var wind = '风向风速';
    var t_h = '温湿度';

if ( element== 'wind' ){
    type = wind;
} else if ( element == 't_h') {
    type = t_h;
}
return type;
}

/**
*
*return y-axis title
*
*/
function y_title(element, serie){
var title;

if ( element== 'wind' ){
    switch (serie){
        case 1: title = '风速'; break;
        case 2: title = '阵风'; break;
        case 3: title = '风向'; break;
    }
} else if ( element == 't_h') {
    switch (serie){
        case 1: title = '温度'; break;
        case 2: title = '湿度'; break;
        default: title = '';
    }
}
return title;

}

function getLocTime(nS) {
        return new Date(parseInt(nS)).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
}

/**
*  气压配置选项
*/
var option_p = {
chart: {
        renderTo: 'station_curve',
        zoomType: 'x'
},
title:{
    text:'气压序列图'
},
subtitle: {
    text: '信科气象台'
},
xAxis: {
    type: 'datetime',
    maxZoom: 3600000, // one hour
    title: {
        text: null
    }
},
yAxis: {
            plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }],     
    min:980,
    max:1040
},
tooltip: {
    formatter: function() {
           return getLocTime(this.x) +': '+ this.y;
        }
},
legend: {
    layout: 'vertical',
    align: 'left',
    x: 220,
    verticalAlign: 'top',
    y: 30,
    floating: true,
    backgroundColor: '#FFFFFF'
},
series: [{
    name:  '海平面气压',
    color: '#4572A7',
    type: 'line',
    pointInterval: 60 * 1000,
    pointStart: Date.UTC(y,m,d,h,minute),   
    marker: {
        enabled: false
    }   
}, {
    name:  '甲板气压',
    type: 'line',
    color: '#AA4643',
    pointInterval: 60 * 1000,
    pointStart: Date.UTC(y,m,d,h,minute),   
    marker: {
        enabled: false
    }
}/*, {
    name:  '3',
    color: '#89A54E',
    pointInterval: 60 * 1000,
    pointStart: Date.UTC(y,m,d,h,minute),   
    type: 'spline', 
    marker: {
        enabled: false
    }
}*/]

};


function draw_curve(platformID,element){
        option.series[0].data = [];
        option.series[1].data = [];

        option_th.series[0].data = [];
        option_th.series[1].data = [];
        jQuery.getJSON('get_last_3d.php',{platformID:platformID,element:element}, function(data) {
            var serie=[];
            var serie1=[];

            if (element == 'wind_dir'){
                $.each(data,function(i,value){
                    serie[i]=parseInt(value.wd);
                }); 

                option.series[0].data = serie.reverse();

            } else if (element == 'wind_speed'){
                $.each(data,function(i,value){
                    serie[i]=parseInt(value.ws);
                    serie1[i]=parseInt(value.ws_max);
                });                     

                option_wind_speed.series[0].data = serie.reverse();
                option_wind_speed.series[1].data = serie1.reverse();

            } else if (element == 't_h') {
                $.each(data,function(i,value){
                    serie[i]=parseInt(value.t);
                    serie1[i]=parseInt(value.h);                        
                }); 

                option_th.series[0].data = serie.reverse();
                option_th.series[1].data = serie1.reverse();

            } else if (element == 'p') {
                $.each(data,function(i,value){
                    serie[i]=parseInt(value.sea_p);
                    serie1[i]=parseInt(value.deck_p);                       
                }); 

                option_p.series[0] = serie.reverse();
                option_p.series[1] = serie1.reverse();

            } else if (element == 'wave_height') {
                $.each(data,function(i,value){
                    serie[i]=parseInt(value.wave_height);                                   
                }); 

                option.series[0].data = serie.reverse();

            } else if (element == 'visibility') {
                $.each(data,function(i,value){
                    serie[i]=parseInt(value.visibility);                                    
                }); 

                option.series[0].data = serie.reverse();

            }  else if (element == 'cloudheight') {
                $.each(data,function(i,value){
                    serie[i]=parseInt(value.cloud_height);                                  
                });

                option.series[0].data = serie.reverse();        
            }               

            switch(element){
                case 'p' : 
                    chart = new Highcharts.Chart(option_p);
                    break;
                case 't_h':
                    chart = new Highcharts.Chart(option_th);
                    break;
                case 'wind_speed':
                    chart = new Highcharts.Chart(option_wind_speed);
                    break;
                default:
                chart = new Highcharts.Chart(option);
            }
            /*  old code, will be replaced with switch
            if (element == 'p') 
                chart = new Highcharts.Chart(option_p);
            else {
                chart = new Highcharts.Chart(option);
            }
            */
        });
}




$( function(){          
draw_curve(105,'t_h');          

})//end of jquery function


     ![the chart][1]

谢谢你提前

Answer 1

它不起作用的原因是因为您未提供y，m，d，h，minute的值系列的Date.UTC(y,m,d,h,minute)属性中的pointStart。见工作：http://jsfiddle.net/LzfM3/

highcharts无法呈现

1 个答案: