2013-05-03 16 views
3

我想創建一個高圖表動態數據動態創建的值,高圖表

我需要在x軸上產生的動態值

xAxis: { 
categories:['project1','project2'] 
    }, 

這是我的for循環,

var project = []; 
for(var i=0;i<project.name;i++){ 
    //new array 
} 

如何在x軸上創建動態值。

+1

你想是這樣的? http://jsfiddle.net/IrvinDominin/6c8Af/ – 2013-05-03 06:37:35

+0

謝謝,正是我需要的 – vishnu 2013-05-03 07:12:57

+0

好吧,我會將它發佈爲答案 – 2013-05-03 07:37:54

回答

3

您可以將數組變量作爲參數傳遞給圖表的類別選項。

例子:

// Original array 
var categories1=['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 

// Copy and/or modifify the second array content and do some stuff 
var categories2=[]; 
for(var i=0;i<categories1.length;i++){ 
    categories2.push(categories1[i]); 
} 

var chart = new Highcharts.Chart({ 

    chart: { 
     renderTo: 'container' 
    }, 

    xAxis: { 
     categories: categories2 // reference categories to an array variabile 
    }, 

    series: [{ 
     data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
    }] 

}); 

工作小提琴:http://jsfiddle.net/IrvinDominin/6c8Af/

0

我使用JSON數據和很長的時間才能解決之後。我的要求是獲取JSON數據,然後根據我的數據要求創建一個Map對象。並動態創建圖表系列。我能夠創建系列,但圖表中沒有任何內容。

這是因爲數字必須轉換爲Int。當我使用parseInt時,它對我有用。

第1步:我得到的JSON數據和處理後,它看起來是這樣的:seriesData = {"O":series1}, {"A":Series2}, {"S":Series3}]

var options = { 
      chart: { 
       renderTo: 'demoGraph', 
       type: 'column' 
      }, 
      title: { 
       text: 'Stacked column chart' 
      }, 
      xAxis: { 
       categories: [1, 2, 3, 4, 5,6], 
       title: { 
        text: 'Severity' 
       }, 
      }, 
      yAxis: { 
       min: 0, 
       title: { 
        text: 'Total Defects with Severity - 1,2,3,4,5,6' 
       }, 
       stackLabels: { 
        enabled: true, 
        style: { 
         fontWeight: 'bold', 
         color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray' 
        } 
       } 
      }, 
      legend: { 
       align: 'right', 
       x: -70, 
       verticalAlign: 'top', 
       y: 20, 
       floating: true, 
       backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white', 
       borderColor: '#CCC', 
       borderWidth: 1, 
       shadow: false 
      }, 
      tooltip: { 
       formatter: function() { 
        return '<b>' + this.x + '</b><br/>' + 
         this.series.name + ': ' + this.y + '<br/>' + 
         'Total: ' + this.point.stackTotal; 
       } 
      }, 
      plotOptions: { 
       column: { 
        stacking: 'normal', 
        dataLabels: { 
         enabled: true, 
         color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white', 
         style: { 
          textShadow: '0 0 3px black, 0 0 3px black' 
         } 
        } 
       } 
      }, 
      series: [{},{},{},{},{},{}], 
     }; 

     for(var i in seriesData){ 
      for(var j in seriesData [i]){ 
       options.series[i].name = j; 
       options.series[i].data = seriesData [i][j]; 
       break; 
      } 
     } 

     var chart = new Highcharts.Chart(options); 
+0

但這種方法的1個缺點是大括號的數量。沒有。要求的地塊列/數據(如1列的3列)是否支持否。的大括號。 Anymis-match會拋出錯誤。所以,保持不。大括號與數據同步。 – Aparajita 2014-10-15 10:54:18

0

另一種方法:

var Series2 = [1,1,1,2,2,2]; 
var names=['O','A']; 
var data1=Series2,seriesArray; //seriesArray is formed dynamically - array of int values 

options.series = [{name: names, data: data1}] 

這正常工作