データストアデータを使用したGoogleチャートのレンダリング

ロン

データストアに保存されているデータを使用してGoogleグラフをレンダリングするのに苦労しています。現時点では、データモデルを照会しました。

results = MyDataModel.query().fetch() 

この段階で私は何をすべきかわからない。たとえば、次のようなPythonでリストを作成するのが最適ですか。

result_list = []
for result in results:
    result_list.append([result.employee, result.salary])

次に、Jinja2テンプレートを使用して、それを配列テーブルに渡します。

var data = google.visualization.arrayToDataTable([
   ['Employee Name', 'Salary'],
   {% for result in result_list %}
    {{result | safe}}
   {% endfor %},
  false);

または、行データをDataTableに動的に追加するのが最善ですか、それともデータストアに直接クエリを実行するのが最善ですか?

どちらの方法を試しても、何かをレンダリングするのに苦労しています。どんな助けでもいただければ幸いです。

ゲファン

Jinja2テンプレートにデータを挿入することで正しいアイデアが得られます。入力をgoogle.visualization.arrayToDataTable正しくフォーマットしていないようです開いている角かっこ([)の1つが閉じていないことに注意してください。

以下は、それがあなたを助ける場合に備えて、私がこれをどのように行ったかの例です。あなたはそれがここに住んでいるのを見ることができます

result_list配列を作成しても意味がありませんresultsクエリに関係なく処理されることになるだろうと、それはあなたのハンドラやテンプレートで行われているかどうかは問題ではありません。

<script type="text/javascript">
var data = new google.visualization.DataTable();
data.addColumn("string", "Candidate");
data.addColumn("number", "Votes");
data.addColumn({type:"string", role:"tooltip"});
data.addColumn({type: "boolean", role:"certainty"});
data.addColumn("number", "Received");
data.addColumn({type:"string", role:"tooltip"});
data.addColumn("number", "Transferred");
data.addColumn({type:"string", role:"tooltip"});
data.addRows([["Vanilla", 110.000000, "Votes: 110", true, 0.000000, "Votes: 110", 0.000000, "Votes: 110"],["Chocolate", 117.000000, "Votes: 117", true, 0.000000, "Votes: 117", 0.000000, "Votes: 117"],["Strawberry", 80.000000, "Votes: 80", true, 0.000000, "Votes: 80", 0.000000, "Votes: 80"],["Chocolate Chip", 103.000000, "Votes: 103", true, 0.000000, "Votes: 103", 0.000000, "Votes: 103"],["Cookies and Cream", 118.000000, "Votes: 118", true, 0.000000, "Votes: 118", 0.000000, "Votes: 118"],["Exhausted", 0.000000, "Votes: 0", true, 0.000000, "Votes: 0", 0.000000, "Votes: 0"]]);
var formatter = new google.visualization.NumberFormat({fractionDigits:0});
formatter.format(data, 1);
formatter.format(data, 3);
formatter.format(data, 5);
var options = {
width:'100%',
height:200,
legend:{position:"none"},
chartArea:{left:100,top:0,width:'100%',height:175},
hAxis:{maxValue:276},
isStacked:true,
colors:["#fcd050", "#87cf32", "#ef3638"],
};
var chart = new google.visualization.BarChart(document.getElementById("282249-1"));
chart.draw(data, options);
</script>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

改行とタグ補間を使用した逆流ストアデータのレンダリングES5

分類Dev

PubNubEONチャートがデータをレンダリングしない

分類Dev

Goチャネルを介したデータのストリーミング

分類Dev

グーグルチャートを使用したパンダデータフレーム内のデータの視覚化

分類Dev

チャート内の複数のデータをレンダリングするPubnubEONチャート

分類Dev

AkkaHttpを使用したSlickストリーミングデータの変換とチャンク応答の送信

分類Dev

AkkaHttpを使用したSlickストリーミングデータの変換とチャンク応答の送信

分類Dev

データバインディングライブラリを使用したMVVMアーキテクチャでタブレイアウトを使用する

分類Dev

angle2-highcharts:レンダリングされたチャートデータを更新します

分類Dev

スイッチケースを使用した再利用可能なコンポーネントデータのレンダリング

分類Dev

ストアドプロシージャを使用したデータベースの新しい行のデータベースのポーリング

分類Dev

CanvasJSチャートでレンダリングされたデータ

分類Dev

PythonFlexテンプレートを使用したデータフロー-ランチャータイムアウト

分類Dev

サーバーがレンダリングしたReactExpressJSフロントエンドがユーザーのReduxストアデータをリーク

分類Dev

RESTを使用したデータのストリーミング

分類Dev

Reactコンポーネントは、Fluxストアからデータをレンダリングしますが、Mongoデータベースからフェッチした場合はレンダリングしません

分類Dev

Entity Frameworkコアデータベースは最初にストアドプロシージャのモデルをレンダリングしませんか?

分類Dev

キャレットを使用したトレーニングおよびテストデータの前処理

分類Dev

axiosを使用したjsonデータのレンダリング

分類Dev

ORステートメントを使用したPandasデータフレームのフィルタリング

分類Dev

リストを使用してパンダのデータフレームをフィルタリングする

分類Dev

Reactフックを使用した複数のフェッチデータ軸-レンダリングデータ

分類Dev

ハイストックチャートが最初のロードでデータを完全にレンダリングしない

分類Dev

リポジトリパターンを使用した複数のデータソースを備えたアーキテクチャ

分類Dev

リーフレットesriプラグインを使用したデータベースからのジオコーディングアドレス名

分類Dev

移動データを使用したダウンサンプリングレート(最初のポイントは元のマトリックスから等しい)

分類Dev

Seleniumを使用してUnderstatチャートデータをスクレイピングする際の問題

分類Dev

ローンチテンプレートを使用したASGのローリングアップデート

分類Dev

ネストされたJSONデータを使用してreactテーブルをレンダリングする

Related 関連記事

  1. 1

    改行とタグ補間を使用した逆流ストアデータのレンダリングES5

  2. 2

    PubNubEONチャートがデータをレンダリングしない

  3. 3

    Goチャネルを介したデータのストリーミング

  4. 4

    グーグルチャートを使用したパンダデータフレーム内のデータの視覚化

  5. 5

    チャート内の複数のデータをレンダリングするPubnubEONチャート

  6. 6

    AkkaHttpを使用したSlickストリーミングデータの変換とチャンク応答の送信

  7. 7

    AkkaHttpを使用したSlickストリーミングデータの変換とチャンク応答の送信

  8. 8

    データバインディングライブラリを使用したMVVMアーキテクチャでタブレイアウトを使用する

  9. 9

    angle2-highcharts:レンダリングされたチャートデータを更新します

  10. 10

    スイッチケースを使用した再利用可能なコンポーネントデータのレンダリング

  11. 11

    ストアドプロシージャを使用したデータベースの新しい行のデータベースのポーリング

  12. 12

    CanvasJSチャートでレンダリングされたデータ

  13. 13

    PythonFlexテンプレートを使用したデータフロー-ランチャータイムアウト

  14. 14

    サーバーがレンダリングしたReactExpressJSフロントエンドがユーザーのReduxストアデータをリーク

  15. 15

    RESTを使用したデータのストリーミング

  16. 16

    Reactコンポーネントは、Fluxストアからデータをレンダリングしますが、Mongoデータベースからフェッチした場合はレンダリングしません

  17. 17

    Entity Frameworkコアデータベースは最初にストアドプロシージャのモデルをレンダリングしませんか?

  18. 18

    キャレットを使用したトレーニングおよびテストデータの前処理

  19. 19

    axiosを使用したjsonデータのレンダリング

  20. 20

    ORステートメントを使用したPandasデータフレームのフィルタリング

  21. 21

    リストを使用してパンダのデータフレームをフィルタリングする

  22. 22

    Reactフックを使用した複数のフェッチデータ軸-レンダリングデータ

  23. 23

    ハイストックチャートが最初のロードでデータを完全にレンダリングしない

  24. 24

    リポジトリパターンを使用した複数のデータソースを備えたアーキテクチャ

  25. 25

    リーフレットesriプラグインを使用したデータベースからのジオコーディングアドレス名

  26. 26

    移動データを使用したダウンサンプリングレート(最初のポイントは元のマトリックスから等しい)

  27. 27

    Seleniumを使用してUnderstatチャートデータをスクレイピングする際の問題

  28. 28

    ローンチテンプレートを使用したASGのローリングアップデート

  29. 29

    ネストされたJSONデータを使用してreactテーブルをレンダリングする

ホットタグ

アーカイブ