Djangoは可視化グラフの多様な方式を示しています。

1.はじめに
皆さん、こんにちは。
Djangoを使ってWeb開発を行う場合、グラフを表示する必要があります。これによって、ウェブページのデータ展示を豊かにします。
一般的な方案はHighcharts、Matplotlib、Echarts、Pyechartsを含みます。その中、後の2つの方案の使用頻度はもっと高いです。
この文章はDjango結合について話します。 Echarts、Pyechartsグラフの可視化を実現する具体的な流れ
2.Echarts
EchartsはBaiduのオープンソースの非常に優れた可視化フレームであり、非常に複雑なグラフのタイプを示すことができます。
簡単なヒストグラムを示す例として、Django統合Echartsの流れを説明します。
まず、あるアプリのviews.pyでビュー関数を作成します。
要求方法がPOSTの場合、ヒストグラムのデータ値を定義してから使用する。 Json Resonseはデータを返します。

from django.http import JsonResponse
from django.shortcuts import render


def index_view(request):
    if request.method == "POST":

        #       
        datas = [5, 20, 36, 10, 10, 20]

        #     
        return JsonResponse({'bar_datas': datas})
    else:
        return render(request, 'index.html', )

テンプレートファイルにインポート Echartsの依存
PS：ローカルJSファイルまたは CDN加速サービス

{#  js echarts  #}
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.common.js"></script>

そして、Windows.onload関数を書き換えて、一つを送ります。 Ajaxはバックエンドに要求し、Echartsを利用してリターン結果をグラフに表示します。

​<script>
    //    
    function show_bar(data) {

        //  
        var bar_widget = echarts.init(document.getElementById('bar_div'));

        //  option
        option = {
            title: {
                text: '      '
            },
            tooltip: {},
            legend: {
                data: ['  ']
            },
            xAxis: {
                type: 'category',
                data: ["  ", "   ", "   ", "  ", "   ", "  "]
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: data,
                type: 'bar'
            }]
        };

        bar_widget.setOption(option)
    }
    //       
    window.onload = function () {
        //  post  ，   index（Jquery）
        $.ajax({
            url: "/",
            type: "POST",
            data: {},
            success: function (data) {
                //    
                show_bar(data['bar_datas']);

                //       
                console.log(data)
            }
        })
    }
</script>

最後に、ルートURLを作成し、プロジェクトを実行します。

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('',include('index.urls')),
​    path('admin/', admin.site.urls),
]

トップページは簡単なヒストグラムを示していることがわかった。

もっと複雑なグラフの展示は公式図を参照することができます。
https://echarts.apache.org/examples/zh/index.html
3.Pyecharts
PyechartsはPythonを使ってEchartsを再パッケージしたオープンソースフレームです。
EchartsよりDjangoインテグレーションPyechartsの方が速くて便利です。
Django統合Pyechartsは4だけ必要です。 ステップ
3-1  インストール依存

#     
pip(3) install pyecharts

3-2  コピー pyechartsのテンプレートファイルはプロジェクトの下にあります。
仮想環境で pyechartsのテンプレートファイルをプロジェクトのテンプレートフォルダにコピーします。
例えば、本機の経路は以下の通りです。
//Users/xingag/Envs/xh_ロゴ/lib/python 3.7/site-packages/pyecharts/render/templates/

3-3  表示関数を作成し、グラフを描画します。
ビューファイルでは、pyechartsライブラリ内蔵のクラスを使用します。 Barはヒストグラムを作成します。

# Create your views here.
from django.http import HttpResponse
from jinja2 import Environment, FileSystemLoader
from pyecharts.globals import CurrentConfig

CurrentConfig.GLOBAL_ENV = Environment(loader=FileSystemLoader("./index/templates"))

from pyecharts import options as opts
from pyecharts.charts import Bar


# http://127.0.0.1:8000/demo/
def index(request):
    c = (
        Bar()
            .add_xaxis(["  ", "   ", "   ", "  ", "   ", "  "])
            .add_yaxis("  A", [5, 20, 36, 10, 75, 90])
            .add_yaxis("  B", [15, 25, 16, 55, 48, 8])
            .set_global_opts(title_opts=opts.TitleOpts(title="Bar-    ", subtitle="     "))
    )
    return HttpResponse(c.render_embed())

3-4  プロジェクトを実行
プロジェクトを実行し、生成したヒストグラムは以下の通りである。

これは最も簡単な使用例で、より複雑なグラフと前後の端が分離、更新された例です。
公式サイトを参照できます。
https://pyecharts.org/#/zh-cn/web_django？id=django-前後端分離
4.最後に
文ではDjangoの高速集積EchartsとPyechartsの基本的な手順を紹介しています。
実際のプロジェクトの中で、いくつかの複雑な図表、前後の端の分離のデータは更新して公式サイトを参考にして開拓に行くことができます。
ソースコード：https://github.com/xingag/python_web
以上がDjangoの視覚化図表の多様な方式の詳細を示しています。Djangoの可視化図表に関する資料は他の関連記事に注目してください。