2016-12-09 1 views
1

チャート表示しないされています。ではは認識もScalaのビューにJSON形式の文字列を渡し、私はプレイ中にコントローラを持って

public Result reportsPieChart() { 
     String jsonString = "{cols: [{id: 'task', label: 'Task', type: 'string'}, {id: 'hours', label: 'Hours per Day', type: 'number'}],rows: [{c:[{v: 'Work'}, {v: 11}]}, {c:[{v: 'Eat'}, {v: 2}]}, {c:[{v: 'Commute'}, {v: 2}]}, {c:[{v: 'Watch TV'}, {v:2}]}, {c:[{v: 'Sleep'}, {v:7, f:'7.000'}]}]}";    
     return ok(piechart.render(jsonString)); 
} 

をビューには、私はGoogleのチャートを表示するには、JavaScriptでこの変数を使用しています:

@(jsonString: String) 

@main(null) { 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
      google.charts.load('current', { 
       packages : [ 'corechart' ] 
      }); 
      google.charts.setOnLoadCallback(drawChart); 

      function drawChart() { 
       var jsonString = "@jsonString"; 
       var newJSON = jsonString.replace(/&#x27;/g, "'"); 
       console.log("newJSON: " + newJSON); 

       // Define the chart to be drawn. 
       var data = new google.visualization.DataTable(newJSON); 

       // Instantiate and draw the chart. 
       var chart = new google.visualization.PieChart(document.getElementById('myPieChart')); 
       chart.draw(data, null); 
      } 
     </script> 
    <section id="displayResults" style="padding: 30px;"> 
     <!-- Identify where the chart should be drawn. --> 
     <div id="myPieChart"/>   
    </section> 
} 

のDataTableにnewJSON変数を渡し、それを認識していないようだ - エラーなしに、コンソールには何も - チャートは表示されません。正しい形式でコンソールに

newJSON変数のプリントアウト:

newJSON: {cols: [{id: 'task', label: 'Task', type: 'string'}, {id: 'hours', label: 'Hours per Day', type: 'number'}],rows: [{c:[{v: 'Work'}, {v: 11}]}, {c:[{v: 'Eat'}, {v: 2}]}, {c:[{v: 'Commute'}, {v: 2}]}, {c:[{v: 'Watch TV'}, {v:2}]}, {c:[{v: 'Sleep'}, {v:7, f:'7.000'}]}]} 

私はGoogleからの指示に従ってています:例では https://developers.google.com/chart/interactive/docs/reference#datatable-class

を、私は私の文字列にそのJSONをコピーしました。

この変数を使用するには、Scalaの中に欠けているものがありますか? Googleによると、リテラル文字列をDataTableに渡すことができます。

私は助けてくれてありがとう!

答えて

0

少し試行錯誤して、名前と値の両方を二重引用符で囲みます。

私のJSON文字列は次のようになります。

String jsonString = "{'cols': [{'id': 'task', 'label': 'Task', 'type': 'string'}, {'id': 'hours', 'label': 'Hours per Day', 'type': 'number'}],'rows': [{'c':[{'v': 'Work'}, {'v': 11}]}, {'c':[{'v': 'Eat'}, {'v': 2}]}, {'c':[{'v': 'Commute'}, {'v': 2}]}, {'c':[{'v': 'Watch TV'}, {'v':2}]}, {'c':[{'v': 'Sleep'}, {'v':7, 'f':'7.000'}]}]}"; 

と私はJavaScriptを変更:魔法のように

var newJSON = jsonString.replace(/&#x27;/g, '"'); 

作品...

関連する問題