2016-12-26 3 views
0

私はこれらのjsonデータを印刷したサーバー側のURLを持っています。javascriptでgetJSON関数を正しく使用する方法は?

{ 
    "data_list": [ 
    { 
     "Y_Value": value1, 
     "X_value": value2, 
    }, 
    { 
     "Y_value": value3, 
     "X_value": value4, 
    }, 
    ] 
} 

私は、Webブラウザでチャート/グラフとして表示するためのHTMLファイルにリンクされたJavaScriptファイルに入れて、URLを取りたいです。

以下は、javascriptファイルのスニペットです。

$(function() { 
.... 
.... 
.... 
//some code 
var line = new Morris.Line({ 
    element: 'line-chart', 
    resize: true, 
    data: [ 
    $.getJSON("http://<url>/mydata", function(data){ 
    console.log(data); 
    var data_list = []; 
    ); 
    } 
], 
ykey: ['Y_value'], 
xkey: ['X_value'], 
labels: ['Testing JSON get function'], 
lineColors: ['#efefef'], 
lineWidth: 2, 
hideHover: 'auto', 
gridTextColor: '#fff', 
gridStrokeWidth: 0.4, 
pointSize: 4, 
pointStrokeColors: ["#efefef"], 
gridLineColor: "#efefef", 
gridTextFamily: "Open Sans", 
gridTextSize: 10 

}); 
}); 

以下のスニペットである私のhtmlファイルから

{% extends "base.html" %} 

{% block content %} 
    <!-- Content Wrapper. Contains page content --> 
    <div class="content-wrapper"> 
    <!-- Content Header (Page header) --> 
    <section class="content-header"> 
     <h1> 
     Dashboard 
     <small>Control panel</small> 
     </h1> 
     <ol class="breadcrumb"> 
     <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li> 
     <li class="active">Dashboard</li> 
     </ol> 
    </section> 

    <!-- Main content --> 
    <section class="content"> 
    ... 
    ... 
    ... 
    (some other code) 
    ... 
    <div class="row"> 
    <!-- Left col --> 
    <section class="col-lg-7 connectedSortable"> 
     <!-- Custom tabs (Charts with tabs)--> 
     <div class="nav-tabs-custom"> 
     <!-- Tabs within a box --> 
     <ul class="nav nav-tabs pull-right"> 
      <li class="active"><a href="#revenue-chart" data-toggle="tab">Area</a></li> 
      <li><a href="#sales-chart" data-toggle="tab">Donut</a></li> 
      <li class="pull-left header"><i class="fa fa-inbox"></i> Sales</li> 
     </ul> 
     <div class="tab-content no-padding"> 
      <!-- Morris chart - Sales --> 
      <div class="chart tab-pane active" id="line-chart" style="position: relative; height: 300px;"></div> 
      <div class="chart tab-pane" id="sales-chart" style="position: relative; height: 300px;"></div> 
     </div> 
     </div> 

    </section> 
    </div> 
    </section> 
    </div> 

私は私の

base.html 

でのJavaScriptファイルのパスを再チェックして、それは正しいです。私は静的なフォルダ名を入れました。

私はスクリプトを実行しますが、私がブラウザを開いたとき、それは空でした。私の質問は、私がスクリプトで何かを逃したのですか?私はjavascriptファイルで関数getJSONを正しく実装する方法をとったのですか?

私はjavascriptのが得意ではないです機能について検索し、これらのリンクに基づいてhttps://www.sitepoint.com/ajaxjquery-getjson-simple-example/

http://api.jquery.com/jquery.getjson/

JavaScriptを書いたので、あなたの助けをありがとうございました。これは私の最初のjavascriptの書き方ですが、何らかのエラーがあればそれが端末に表示されますが、何もないと思っていました。

答えて

2

でデータMorris.Lineを初期化する必要があります。

$.getJSON("http://<url>/mydata", function(data) { 
    var line = new Morris.Line({ 
     element: 'line-chart', 
     resize: true, 
     data: data.data_list, 
     ykey: ['Y_value'], 
     xkey: ['X_value'], 
     labels: ['Testing JSON get function'], 
     lineColors: ['#efefef'], 
     lineWidth: 2, 
     hideHover: 'auto', 
     gridTextColor: '#fff', 
     gridStrokeWidth: 0.4, 
     pointSize: 4, 
     pointStrokeColors: ["#efefef"], 
     gridLineColor: "#efefef", 
     gridTextFamily: "Open Sans", 
     gridTextSize: 10 
    }); 
}); 
0

あなたは$.getJSON()を使用してデータをフェッチして、あなたはコードの下のように$.getJSON()successコールバックの内側にあなたのMorris.Line()コンストラクタを配置する必要があり、コールバック

$.getJSON("http://<url>/mydata", function(data) { 
    console.log(data); 
    var data_list = data.data_list; 
    //some code 
    var line = new Morris.Line({ 
     data: data_list, 
     ... 
    }); 
}); 
関連する問題