如何从ajax加载数据到highcharts?

时间:2015-01-15 23:37:36

标签: highcharts

我试图从ajax调用中获取高级图表中的系列。但它不能正常工作。我没有在图表中填充数据。请任何人帮助我。

$(document).ready(function() {

        $('#exercise').submit(function(e) {
            var form = $(e.target);
            e.preventDefault();

            $.ajax({
                type: form.attr('method'),
                url: form.attr('action'),
                dataType: 'json',
                data: form.serialize(),
                success : function(data){
                    alert("parse");
                    alert(data);
                    chart4(data);

                },
                error : function(){
                    alert("Exercise Error!");
                }
            });
        });
    });

这是我的ajax电话

unction chart4(data){
Highcharts.setOptions({  
		         
		      });  
			alert("HIT");
				var chart = new Highcharts.Chart({
						chart: {
							renderTo: 'container',
							defaultSeriesType: 'column',
							margin: [50, 150, 60, 80]
						},
						title: {
							text: 'Exercise',
							style: {
								margin: '10px 100px 0 0' // center it
							}
						},
					     xAxis: {
					            type: 'datetime',
					            dateTimeLabelFormats: { 
					                month: '%e. %b',
					                year: '%b'
					            },
					           
					            
					        },
					        yAxis: {
					            min: 0,
					            title: {
					                text: 'Minutes'
					            }
					        },
					        tooltip: {
					            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
					            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
					                '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
					            footerFormat: '</table>',
					            shared: true,
					            useHTML: true
					        },
					        plotOptions: {
					            column: {
					                pointPadding: 0.2,
					                borderWidth: 0
					            }
					        },
					        series:[data]
					   
						
					});
}

[{"duration":120,"date":1418803200000},{"duration":90,"date":1418889600000},{"duration":90,"date":1418976000000},{"duration":90,"date":1419235200000},{"duration":20,"date":1419580800000},{"duration":80,"date":1419667200000},{"duration":120,"date":1419753600000},{"duration":90,"date":1419840000000},{"duration":90,"date":141992600000}]


This is my JSON response

1 个答案:

答案 0 :(得分:0)

问题是您在JSON中有自定义名称。它应该是持久和日期字段的x / y instaed。除此之外:series:[data]应该替换为series:data,因为你的json是数组。