2015-10-08 86 views
1

我試圖在nodejs中使用highcharts創建列圖,並且數據正在從mongodb獲取。 我在系列選項卡住請幫我擺脫它。下面Highcharts列表圖與來自mongodb的數據

的是我的EJS文件中的代碼 -

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>Pie Highcharts Example</title> 


    <!-- Add these JavaScript inclusions in the head of your page --> 
    <script type="text/javascript" src="/javascripts/jquery.min.js"></script> 
    <script type="text/javascript" src="/javascripts/highcharts.js"></script> 


    <!-- Optional: the exporting module --> 
    <script type="text/javascript" src="/javascripts/exporting.js"></script> 


    <!-- Add the JavaScript to initialize the chart on document ready --> 
    <script type="text/javascript"> 
     chartdata= <%-JSON.stringify(data)%> 

     var category = []; 
     var dname=[]; 
     var kdata=[]; 
     for(j=0;j<chartdata.length;j++){ 
      category[j]=[chartdata[j].catname] 
      // name[j]=[chartdata[j].seriesname] 
      // data[j]=[chartdata[j].wdata,chartdata[j].hdata,chartdata[j].cdata] 
     } 
     for(k=0;k<chartdata.length;k++){ 
      dname[k]=[chartdata[k].seriesname]; 
     } 
     for(i=0;i<chartdata.length;i++){ 
      kdata[i] = [chartdata[i].wordval,chartdata[i].codeval,chartdata[i].highval]; 

     } 
     var chart; 
     $(document).ready(function() { 
      chart = new Highcharts.Chart({ 
       chart: { 
        renderTo: 'container', 
        defaultSeriesType: 'column' 
       }, 
       title: { 
        text: 'Monthly Average data' 
       }, 

       xAxis: { 
        categories: category 
       }, 
       yAxis: { 
        min: 0, 
        title: { 
         text: 'Rainfall (mm)' 
        } 
       }, 
       legend: { 
        layout: 'vertical', 
        backgroundColor: '#FFFFFF', 
        align: 'right', 
        verticalAlign: 'top', 
        x: 0, 
        y: 40, 
        floating: true, 
        shadow: true 
       }, 
       tooltip: { 
        formatter: function() { 
         return ''+ 
          this.series.name +': '+ this.y ; 
        } 
       }, 
       plotOptions: { 
        column: { 
         pointPadding: 0.3, 
         borderWidth: 0 
        } 
       }, 
       series: [{ 
        name: dname[0], 
        data: kdata[0] 

       }, 
       { 
        name: dname[1], 
        data: kdata[1] 

       }, 
       { 
        name: dname[2], 
        data: kdata[2] 

       } 
       ] 
      }); 


     }); 

    </script> 

</head> 
<body> 
    <!-- Add the container --> 
    <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div> 
</body> 
</html> 

@NishithChaturvedi - 當我在做這樣其工作所以只能用循環問題,我知道我在問愚蠢的問題,但並沒能糾正。

+0

只是告訴你面臨的問題是什麼?你能得到圖表或發佈劇情..或創建一個jsfiddle –

+0

把你的json響應在這裏 –

+0

系列:[名稱,數據]是不正確的。不應該有一系列名稱和一系列數據。取而代之的應該是{名稱: 'theName', \t \t \t \t \t \t \t \t \t \t數據:yourData \t \t \t \t \t \t \t \t \t}中循環。 –

回答

0

謝謝你的時間我已經修復了我在系列值 我剛剛創建了另一個數組var並將名稱和數據存儲到它並串聯傳遞該數組。