Clever Geek Handbook

Djangoでグラフ（グラフ）を描く

django-google-charts






多くのWeb開発者は、図を使用して比較的大量のデータを視覚化する必要に直面することがあります（以下、これをグラフと呼びますが、これは完全に真実ではありません）。 このタスクは新しいものではなく、ネットワーク上には既製のソリューションが数多くあります。画像、Canvas、SVG、Flash、Silverlightを使用して、サーバー側とクライアント側で作業するソリューションです。



この記事では、 django-google-chartsと、Djangoを実行しているサイトでのプロットにGoogle Chart Toolsを使用するいくつかの機能について説明します 。



多くの場合、グラフをページに追加する必要がある場合、開発者は最も抵抗の少ないパスに従います。インターネット上のサンプルからJavaScriptをコピーし、アプリケーションからのデータを何らかの方法で表示します。 次のようになります： 



var chart_data = [ {% for row in chart_data %} [{{ row.0 }}, {{ row.1 }}], {% endfor %} ];


なぜこれが悪いのですか？

一時的な解決策として、この設計はまだ適していますが、それ以上ではありません。



問題の声明



グラフを描くための良い解決策：
  1. サイトに新しいグラフィックを簡単かつ明確に追加し、不要なものを削除できます。
  2. 一般的な要素（配色など）を決定するためのDRY原則に準拠しています。
  3. 再利用できます。
  4. 新しいAPIを発明しません。

ソリューションオプション



django-google-chartsチャート作成アプリケーションは、私の現在のプロジェクトの小さなハックから生まれました。 Alarma：これは最初の公開リリースであり、奇妙なバグが発生する可能性があります。 訂正やコメントを歓迎します。



設置 


 $ pip install django-google-charts #  $ easy_install django-google-charts


'googlecharts'



をINSTALLED_APPS



追加します。



仕組み（一般的なビュー） 


 {% load googlecharts %} {% googlecharts %} {% data  " " %} {# ()   #} {% col "" "" %}...{% endcol %} {#  #} {% col "" "" %}...{% endcol %} {#   #} ... {% enddata %} {% options " " %} {# ()   #} ... {% endoptions %} {% graph "#id" "" "" %} {#   #} {% endgooglecharts %}


各タグの目的について少し説明します。



{% googlecharts %}...{% endgooglecharts %}





必要なスクリプトを接続し、構造全体のコンテナです。 面白くない。



{% data "" %}...{% enddata %}





名前付きデータセット。 名前を省略でき"default"



（ "default"



取得）。



{% col "" "" %}...{% endcol %}





フォーマット。 Google Visualization APIのデータタイプは次のとおりです。 



 'string' 'number' 'boolean' 'date' 'datetime' 'timeofday'


詳細はドキュメントをご覧ください。



特殊変数val



はタグ内で渡されます。この場所でフォーマットできます： 



 {% col "string" "Date" %}'{{ val|date:"M j" }}'{% endcol %} {# ,  #} {% col "number" %}{{ val|floatformat:2 }}{% endcol %}


結果は宣言された型に対応する必要があります。 文字列自体を引用符で囲みません。



例。 次のコンテキスト変数を{% data %}



ブロックに渡したと仮定します。 



 [['foo', 32], ['bar', 64], ['baz', 96]]


入力行の要素数に応じて、2つのタグ{% col %}



が必要です。 最初のものは、入力 'foo'、 'bar'および 'baz'を受け取ります。 それぞれ、32、64、および96。実装（最も単純な）は次のようになります。 



 {% col "string" "Name" %}"{{ val }}"{% endcol %} {% col "number" "Value" %}{{ val }}{% endcol %}


{% options "" %}...{% endoptions %}





チャートオプション。 



 {% options %} kind: "LineChart", options: { width: 300, height: 240 // ... } {% endoptions %}


タグ内にはJavaScriptオブジェクトがあり、グローバル変数を使用して関数を呼び出すことができます。 チャートタイプと各タイプでサポートされているオプションをここにリストします 。



{% graph "id_" "" "" %}





ページ上の要素にグラフを表示します。 最後の2つのパラメーターは省略でき、結果は"default" "default"



です。



使用例



次のようなモデルがあるとします： 



 class Payment(models.Model): amount = models.DecimalField(max_digits=11, decimal_places=4) datetime = models.DateTimeField()


django-qsstats-magicを使用して、グラフに表示するデータを準備できます。 



 from qsstats import QuerySetStats def view_func(request): start_date = ... end_date = ... queryset = Payment.objects.all() #   ... qsstats = QuerySetStats(queryset, date_field='datetime', aggregate=Count('id')) # ...     values = qsstats.time_series(start_date, end_date, interval='days') return render_to_response('template.html', {'values': values})


time_series



メソッドは、次の形式でデータを返します。 



 [[date, value], [date, value], ...]


template.htmlファイルで： 



 {% load googlecharts %} <div id="count_graph"></div> {% googlecharts %} {% data values "count" %} {% col "string" "Date" %}"{{ val|date:"M j" }}"{% endcol %} {% col "number" "# of payments" %}{{ val }}{% endcol %} {% enddata %} {% options %} kind: "LineChart", options: { backgroundColor: "#f9f9f9", colors: ["#09f"], gridlineColor: "#ddd", legend: "none", vAxis: {minValue: 0}, chartArea: {left: 40, top: 20, width: 240, height: 180}, width: 300, height: 240 } {% endoptions %} {% graph "count_graph" "count" %} {#     #} {% endgooglecharts %}


スケーリング


ここで、ページに別のグラフを追加するには、次を実行する必要があります。



-データの収集（views.py）： 



  #         summary = qsstats.time_series(start_date, end_date, interval='days', aggregate=Sum('amount')) return render_to_response('template.html', {'values': values, 'summary': summary})


-template.htmlに追加： 



 <div id="count_sum"></div> ... {% data summary "sum" %} {% col "string" "Date" %}"{{ val|date:"M j" }}"{% endcol %} {% col "number" "Paid amount, USD" %}{{ val|floatformat:2 }}{% endcol %} {% enddata %} ... {% graph "count_sum" "sum" %} {#    ,  #}


Github



django-google-chartsのソースコードには、デモプロジェクトも含まれています。 開始するには、次を実行します。 



 $ python manage.py syncdb --noinput #    sqlite  /tmp $ python manage.py populatedb #     $ python manage.py runserver


テストプロジェクトは次のようになります。



django-google-charts



最初のパブリックリリースの制限（軟膏で飛ぶ）

  1. 1ページにつき1つのタグ{% googlecharts %}



    のみ。
  2. （ほとんど）エラーチェックはありません。特にJavaScriptでは。
  3. わずかなドキュメント。
それを読んだすべての人に感謝します。 グラフィックをどのように描きますか？


More articles:


All Articles