Question

我试图将数据库中的数据显示为linear highchart。这是我的控制器的json响应，它从数据库中检索到：

[{"protocole":"tcp","date":"01/02/20","time":"00:10:20","total":281},
{"protocole":"udp","date":"01/02/20","time":"00:10:30","total":201},
{"protocole":"tcp","date":"01/02/20","time":"00:10:40","total":100}}

我成功地从数据库中显示yAxix中的数据，但我已使用xAxix中的静态数据对其进行了测试，这是代码：

$(document).ready(function() {

    var options={
         chart: {
                renderTo: 'container',
                type: 'line'
            },
        title : {
          text: 'Total Request number'   
       },
       subtitle : {
          text: 'Server num1'
       },
        xAxis : {
          categories: ['00:10:20','00:10:30','00:10:40']
       },
        yAxis :{
          title: {
             text: 'Total'
          },
          plotLines: [{
             value: 0,
             width: 1,
             color: '#808080'
          }]
       },   

        tooltip : {
          valueSuffix: '\xB0C'
       },

        legend : {
          layout: 'vertical',
          align: 'right',
          verticalAlign: 'middle',
          borderWidth: 0
       },

        series : [{}]

    }
 $.ajax({
type: 'GET',
contentType : 'application/json',
dataType: 'JSON',
url: 'jsonsdp',
data: "",
success: function(data){
     var array=[] ;
    $.each(data, function(i) {


        array.push(data[i].total); 

        })
         alert(array);
    options.series[0]= {"name": 'total',
            "data":array};


    var chart = new Highcharts.Chart(options);

}
});

});

现在我希望categories是动态的并检索time并将其放在轴上。我试过这段代码，但仍然没有用！

  $.ajax({
type: 'GET',
contentType : 'application/json',
dataType: 'JSON',
url: 'jsonsdp',
data: "",
success: function(data){
     var array=[] ;
   var array1=[];
    $.each(data, function(i) {


        array.push(data[i].total); 
      array1.push(data[i].time);
        })
        // alert(array);
    options.series[0]= {"name": 'total',
            "data":array};
        options.xAxis.categories=array1;

    var chart = new Highcharts.Chart(options);

}
});

有人知道怎么做吗？提前谢谢。

Answer 1

我已经测试了这段代码，它完美无缺！我不知道为什么这第一次不起作用并显示错误，现在有效！我发布它也许它可以帮助someOne。如果有人知道为什么最好提一下它。

 $.ajax({
type: 'GET',
contentType : 'application/json',
dataType: 'JSON',
url: 'jsonsdp',
data: "",
success: function(data){
 var array=[] ;
var array1=[];
$.each(data, function(i) {


    array.push(data[i].total); 
  array1.push(data[i].time);
    })
    // alert(array);
options.series[0]= {"name": 'total',
        "data":array};
    options.xAxis.categories=array1;

var chart = new Highcharts.Chart(options);

}
});

使用数据库中的数据显示线性高图

1 个答案: