2012-09-18 125 views
0

我已經在另一個文件中回顯數據庫中的數據..現在我正在提取數據。我是新來的jQuery和highchart .. plz幫助 通過我的數據格式爲:highcharts- php/mysql數據提取

[ 
{"name":"a","data":0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49]}, 
{"name":"b","data":[34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49]} 
] 

我對highchart代碼:

var chartOptions = { 
    chart: { 
     renderTo: 'container', 
     zoomType: 'x', 
     defaultSeriesType: 'line',   
     backgroundColor: null, 
     plotBackgroundColor: null, 
     borderRadius:20, 
     plotShadow: false, 
     events: { 
      load: function() { 
       // event.exporting.buttons.infoButton.symbolX=5; 
       // event.exporting.buttons.infoButton.symbolY=2; 
       // info_img=0; 
        // this.renderer.rect(5, 5, 60, 25, 15).attr({ fill: issue_col[1], zIndex: 0 }).add(); 
        } 
     }, 
     style: { 
      zIndex: 1 
       }, 
     marginRight:30 

    }, 
    title: { 
     text: 'hello', 
     style: { 
      fontFamily: 'Arial', 
      fontWeight: 'bold', 
      fontSize: '12px', 
      textShadow: 'none' 
       } 
    }, 
    xAxis: { 
     type:'datetime', 
     title: { 
     text: null 
       } 
    }, 
    yAxis: { 
     title: { 
     text: 'nothing is coming', 
      style: { 
      fontFamily: 'Arial', 
      fontWeight: 'bold', 
      fontSize: '12px', 
      textShadow: 'none' 
       } 
      }, 
     min: 0.0, 



    }, 
    credits: { 
     enabled: true, 
     position: { 
      align: 'center', 
      x: 10, 
      verticalAlign: 'bottom', 
      y: -3 
     }, 
     href: "http://www.interscapetech.com", 
     style: { 
      cursor: 'pointer', 
      color: '#909090', 
      fontSize: '9px' 
     }, 
     text: "(c)1997- Interscape Technologies Inc. All rights reserved." 
    }, 
    /*labels:{ 
     items: [{ 
      html: "TM", 
      style: { 
       fontSize:'8px', 
       left: '330px', 
       top: '140px' 
      } 
     }], 
     style: { 
      color: 'grey' 
      } 
    },*/ 
    lang:{ 
      downloadButtonTitle:'Download Chart', 
      printButtonTitle :'Print Chart', 
      infoButtonTitle:'Chart Information', 
      switchButtonTitle:'Click to Enlarge'   
    //  switchButtonTitle:'Switch to Bar Chart' 
     }, 

    navigation:{ 
     buttonOptions:{ 
      align:'right', 
      verticalAlign:'middle', 
      height:15, 
      symbolFill: '#4572A7', 
      hoverSymbolFill: '#768F3E', 
      hoverBorderColor:'#92A8CD', 
      borderColor:'#3D96AE', 
      backgroundColor:'white', 
      borderRadius:5, 
      borderWidth:2, 
      width:20, 
      symbolX:10, 
      symbolY:8, 
      symbolSize:10 
     } 
    }, 
    subtitle: { 
     text: '', 
     align:'left', 
     style: { 
      fontFamily: 'Arial', 
      fontWeight: 'bold', 
      fontSize: '12px', 
      textShadow: 'none', 
      color: 'white' 
       }, 
     x:3, //-165 if center 
     y:12 
    }, 
    plotOptions: { 
     line: { 
      lineWidth: 1, 
      marker: { 
       enabled: false, 
       states: { 
        hover: { 
        enabled: true, 
        radius: 5 
         } 
         } 

        }, 
      shadow: false, 
      states: { 
       hover: { 
        lineWidth: 1     
         } 
        }, 
      zindex:1 
      }, 
     series:[{ 
       zindex:1 
      }] 
    } 
    , 
    tooltip: { 
     formatter: function() { 
      var ctime= Highcharts.dateFormat('%m/%d/%Y %H:%M:%S',this.x); 
      var s = '<b>'+ ctime +'</b>'; 
      $.each(this.points, function(i, point) { 
       var result=Math.round(point.y*10)/10; 
       s += '<br/>'+ point.series.name +': '+result; 
      }); 
      return s; 
     }, 
     shared: true, 
     backgroundColor: '#FCFFC5' 
    }, 
    legend: { 
     itemStyle: { 
      fontFamily: 'Arial', 
      fontSize: '12px', 
      textShadow: 'none' 
       }, 
     enabled: true 
//  symbolPadding: 10 
    }, 
    series: [] 
    }; 

$(document).ready(function() 
    { 

     var url='highchars_test2.php'; 
alert('helo'); 

    $.getJSON(url, function(seriesData){ 

    $(seriesData).each(function(i, pdata){ 
    console.log(); 
       if(i==(seriesData.length-1) || i==(seriesData.length-2)) 
       {} 
       else 
       { 
        alert(pdata['data']); 
        chartOptions.series.push(pdata); 
       } 
      }); 
       chart = new Highcharts.Chart(chartOptions); 
    }); 
    }); 

不能創建圖表.. plz幫助..

+0

它不應該是'VAR URL =「highchars_test2.php」;'代替var url ='highchars_test2.php;'?單引號缺失? – shibly

+0

@shibly:是啊..同樣的事情:-) ..我試圖用也......但沒有得到圖表 – mikelee

+0

缺少一個[在你的線上'{「name」:「a」,「data」:'是它一個失誤 ? –

回答

1

在一系列數據的格式不正確(左括號缺失) 我補充說,它的工作
檢查了這一點http://jsfiddle.net/q6LVV/

+0

謝謝Rajani ..非常有用的提示 – mikelee

1

似乎在系列a中,數據數組之前缺少開放方括號。

+0

我試着編輯數據..但仍然沒有工作。我改變了if循環..現在它的工作..感謝很多Torsteing – mikelee