ハイチャートデータはダウンロードされますが、ノードを使用してブラウザに表示されません。

Question

ハイチャートに問題がありますわかりません。ブラウザからチャートをダウンロードできますが、表示されません。

ここは私のjavascriptファイルです。

chart.js

var cpvmPartners = []; 
var cpvmPlannedCPM = []; 
graphData = [] 


$(function(){ 
    $.getJSON('/cpvmdata', function(data) { 
     for(k in data){ 
      graphData.push([data[k]['partner'],data[k]['plannedcpm']]) 
     } 
}); 


    $(function() { 
     $('#cpvmSummary').highcharts({ 
      chart: { 
       type: 'column' 
      }, 
      title: { 
       text: 'World\'s largest cities per 2014' 
      }, 
      subtitle: { 
       text: 'Source: <a href="http://en.wikipedia.org/wiki/List_of_cities_proper_by_population">Wikipedia</a>' 
      }, 
      xAxis: { 
       type: 'category', 
       labels: { 
        rotation: -45, 
        style: { 
         fontSize: '13px', 
         fontFamily: 'Verdana, sans-serif' 
        } 
       } 
      }, 
      yAxis: { 
       min: 0, 
       title: { 
        text: 'Population (millions)' 
       } 
      }, 
      legend: { 
       enabled: false 
      }, 
      tooltip: { 
       pointFormat: 'Population in 2008: <b>{point.y:.1f} millions</b>' 
      }, 
      series: [{ 
       name: 'Population', 
       data: graphData , 
       dataLabels: { 
        enabled: true, 
        rotation: -90, 
        color: '#FFFFFF', 
        align: 'right', 
        format: '{point.y:.1f}', // one decimal 
        y: 10, // 10 pixels down from the top 
        style: { 
         fontSize: '13px', 
         fontFamily: 'Verdana, sans-serif' 
        } 
       } 
      }] 
     }); 
    }); 
}); 

これは、HTML

<div class="container"> 

     <!-- Portfolio Item Heading --> 
     <div class="row"> 
      <div class="col-lg-12"> 
       <h1 class="page-header">CPVM Summary 
      <!--   <small>CPVM Summary</small> --> 
       </h1> 
      </div> 
     </div> 
    <!-- jQuery --> 
    <script src="js/jquery.js"></script> 

    <script src="js/cpvmGraphs.js"></script> 


    <!-- Bootstrap Core JavaScript --> 
    <script src="js/bootstrap.min.js"></script> 


    <!-- High Charts --> 
    <script src="https://code.highcharts.com/highcharts.js"></script> 
    <script src="https://code.highcharts.com/modules/exporting.js"></script> 

ない、それは他の一つの場所にロードしていないが、なぜ、どの情報が大幅になり、この時点で他に何をすべきかPR確かです感謝。

Answer 1

これは、「DOM ready」機能でデータを取得してから別のチャートにレンダリングするためです。あなたのデータは非同期ですので、戻ってくるまではそこにはありませんが、その前にチャートをレンダリングします。

はこれを修正するには、別の関数にすべてのあなたのチャートのものを入れて、我々はあなたがJSONは、他の機能では、データを渡すあなたのチャートを描画取得その後、renderChartそれを呼び出す言うことができます。ここで

ドキュメントからの例です：

$(document).ready(function() { 

    var options = { 
     chart: { 
      renderTo: 'container', 
      type: 'spline' 
     }, 
     series: [{}] 
    }; 

    $.getJSON('data.json', function(data) { 
     options.series[0].data = data; 
     var chart = new Highcharts.Chart(options); 
    }); 

}); 

http://www.highcharts.com/docs/working-with-data/custom-preprocessing#3