2017-03-31 8 views
0

EJSタグを使用してグラフにデータを追加することはできますか?EJSタグとChartJS?

labels: ["<%= currentUser.datapoint1 %>", "<%= currentUser.datapoint2 %>", "<%= currentUser.datapoint3 %>"] 

data: [<%= currentUser.datapoint10 %>, <%= currentUser.datapoint11 %>] 

どのように私は、グラフデータを取り込むためにEJSタグを使用して実行します:私はこのような何かをやりたいと思ってる

var canvas = document.getElementById('myChart'); 
var data = { 
    labels: ["One", "February", "March", "April", "May", "June", "July"], 
    datasets: [ 
     { 
      label: "My First dataset", 
      backgroundColor: "rgba(255,99,132,0.2)", 
      borderColor: "rgba(255,99,132,1)", 
      borderWidth: 2, 
      hoverBackgroundColor: "rgba(255,99,132,0.4)", 
      hoverBorderColor: "rgba(255,99,132,1)", 
      data: [10, 20, 81, 56, 55, 40], 
     } 
    ] 
}; 

:ここに私の現在のグラフのデータはありますか? (注:EJSタグ情報は、チャートを生成する前にユーザーに保存されています)

答えて

4

はい、さまざまなview JavaScriptフレームワーク(例:ハンドルバー、流星の中のスペースバー、ejsなど)に使用されているEJSタグや他の同様のタグを使用できます。 Chart.jsは実行時に初期化されるため、データがファイルにどのように反映されたかはわかりません(たとえば、わからない... JavaScriptが事前処理されて生成されたことも気にしません) 。

タグ自体のフォーマットは、データを格納した変数と関係があります。 labelsdataを配列に格納し、JSON.stringify()を使用することをおすすめします。

// defined in your app 
var labels = ['label 1', 'label 2', ...]; 
var data = [datapoint1, datapoint2, ...]; 

// in your EJS file. 
var canvas = document.getElementById('myChart'); 
var data = { 
    labels: <%- JSON.stringify(labels); %>, 
    datasets: [ 
    { 
     label: "My First dataset", 
     backgroundColor: "rgba(255,99,132,0.2)", 
     borderColor: "rgba(255,99,132,1)", 
     borderWidth: 2, 
     hoverBackgroundColor: "rgba(255,99,132,0.4)", 
     hoverBorderColor: "rgba(255,99,132,1)", 
     data: <%- JSON.stringify(data); %>, 
    } 
    ] 
}; 
0

最も簡単な方法はEJSタグでJSON.stringify()を使用することです。あなたはそれがあなたのdata変数に基づいています

labels: <%- JSON.stringify(data.labels); %>, 
data: <%- JSON.stringify(data.datasets.data); %> 

を行うことができます。したがって、このコードを適切に調整する必要があるかもしれません。