Hohe Diagrammdaten Downloads, aber nicht im Browser mit Knoten

Question

Ich habe ein Problem mit High Charts, die ich nicht verstehe. Ich kann das Diagramm vom Browser herunterladen, es wird jedoch nicht angezeigt.

Hier ist meine Javascript-Datei.

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' 
        } 
       } 
      }] 
     }); 
    }); 
}); 

Dies ist die 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> 

nicht sicher, was sonst an dieser Stelle pr zu tun, warum es an einem Ort geladen, aber nicht die andere, würde jede Info stark sein geschätzt.

Answer 1

Dies liegt daran, dass Sie die Daten in einer "on DOM ready" -Funktion erhalten und dann das Diagramm in einem anderen rendern. Ihre Daten sind asynchron, also ist es nicht da, bis es zurückkommt, aber Sie rendern das Diagramm davor.

Um dies zu beheben, setzen Sie alle Ihre Grafik Sachen in einer separaten Funktion, können wir sagen, es renderChart nennen, dann, nachdem Sie die JSON, in der anderen Funktion erhalten, Ihr Diagramm machen in die Daten übergeben.

Hier von der Dokumentation ist ein Beispiel:

$(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