2016-02-11 15 views
0

我想用ajax使用Highcharts。Highcharts使用值不是數組Ajax

 $.ajax({ 
     url: 'my/rest/get_devices_usage.php', 
     type: 'POST', 
     data: {}, 
     success: function(data, textStatus, jqXHR) { 
      series = []; 

      var months = []; 
      var device_names = []; 
      var usages = []; 


      for(var i = 0; i<data.length; i++) 
      { 
       months.push(data[i].month); 
       device_names.push(data[i].device_name); 
       usages.push(parseFloat(data[i].usage_sum)); 
      } 

      var data = []; 
      data = generateData(months, device_names, usages); 


//create graph 
     $('#panel-body').highcharts({ 
      title: { 
       text: '' 
      }, 
      chart: { 
       type: 'column' 
      }, 

      xAxis: { 
      categories: months 
      }, 

      series: data 
     }); 



    function generateData(cats, names, points) { 
     var ret = {}, 
      ps = [], 
      series = [], 
      len = cats.length; 

     for (var i = 0; i < len; i++) { 
      ps[i] = { 
       x: cats[i], 
       y: points[i], 
       n: names[i] 
      }; 
     } 
     //populate the graph 
     for (i = 0; i < len; i++) { 
      var p = ps[i]; 
       series.push({ 
       name: p.n, 
       data: [p.y] 
       }); 
      } 
     return series; 
    } 


    }, 
     error: function(jqXHR, textStatus, errorThrown) 
     { 

     }  
     }); 

enter image description here

我需要在圖表上顯示的值,設備和月/年的名稱。問題是,當我嘗試將數據只用作只有一個值的數組時,我只能看到一個類別(即使我有5個類別)。我該如何解決它?

我可以以某種方式查看我擁有的所有類別,並將結果放到正確的類別中嗎?

+1

如果你有5個類別,你需要爲所有5個數據點提供*。如果你省略了數據(數組中只有1個值),那麼你需要爲其他類別提供*空數據*。 – Draco18s

回答

0

我解決它一點點不同。對於我的問題的解決方案就像Draco18s說的那樣......我是如何解決這個問題的,我已經指定了我希望在哪個位置上看到我的系列價值。

所以我做了第一個indexof列表中的項目。然後我將這個索引用於系列數據。因此,解決方案看起來像這樣

  $.ajax({ 
      url: 'my/rest/get_devices_usage.php', 
      type: 'POST', 
      data: {}, 
      success: function(data, textStatus, jqXHR) { 
       series = []; 

       var months = []; 
       var device_names = []; 
       var usages = []; 

       for(var i = 0; i<data.length; i++) 
       { 
        months.push(data[i].month); 
        device_names.push(data[i].device_name); 
        usages.push(parseFloat(data[i].usage_sum)); 
       } 

       var data = []; 
       data = generateData(months, device_names, usages); 


      $('#panel-body').highcharts({ 
       title: { 
        text: '' 
       }, 
       chart: { 
        title: '', 
        type: 'column' 
       }, 

       xAxis: { 
       categories: months 
       }, 

       series: data 
      }); 



     function generateData(cats, names, points) { 
      var ret = {}, 
       ps = [], 
       series = [], 
       len = cats.length; 

      for (var i = 0; i < len; i++) { 
       ps[i] = { 
        x: cats[i], 
        y: points[i], 
        n: names[i] 
       }; 
      } 
      //populate the graph 
      for (i = 0; i < len; i++) { 

       var p = ps[i]; 
///Solution 
       var month = 0; 
       //find position of the actual month 
       month = months.indexOf(p.x); 

        series.push({ 
        name: p.n, 
        data: [[month, p.y]] 
        }); 
       } 
///Solution 
      return series; 
     } 


    }, 
     error: function(jqXHR, textStatus, errorThrown) 
     { 

     }  
     }); 

所以只是依靠哪一類是你的價值,並把它放在那 類別的數據:[category_position,值]] ...就是這樣:)

謝謝你們尋求幫助。

0

可以將xAxis設置爲max,在本例中爲4(因爲從0索引的數組中有5個類別)。

例子:http://jsfiddle.net/pa2pssc6/

$(function() { 
    $('#container').highcharts({ 
     xAxis: { 
     categories: ['a','b','c','d','e'], 
     max: 4 
     }, 
     series: [{ 
      data: [1] 
     }] 
    }); 
});