views.py(python)からデータを渡して、Chart.jsでRaderチャートを描く/Chart.js+django2020-01-27views.py(python)からデータを渡して、Chart.jsでRaderチャートを描く/Chart.js+djangoWEB:PythonでWebアプリWebアプリケーションでレーダーチャートを使う必要があって、Chart.jsの使い方とdjangoからのデータの受け渡し方法を調べました。はじめに今回、描きたいのはこんな感じの「レーダーチャート」です。これをChart.jsで描くのは簡単でもあり、煩雑でもあります。Chart.jsでレーダーチャートをデフォルトで描くだけなら簡単ですが、うすいグレー一色の非常にしょぼい・・グラフになってしまいます。そこに色をつけて、フォントを大きくして、かつ目盛りを固定にする(デフォルトだと、目盛りが自動調整されるので意図した形になりません)には、それなりの設定をしないといけないです。今回は、それなりに見える最小限の設定をやってみたいと思います。HtmlとJavaScriptのソースと補足説明まずHtmlです。%}"></script>これだけです。処理の本体はJavaScriptで、chart01.jsという名前で保存している前提です。本体のJavaScriptです。}});個人的には普通に使う最小限の設定かなと思っています。ポイントを補足します。ラベルを指定することで、選択肢の数が決まります。'選択肢4','選択肢5'],データは配列で渡します。6]データの並び順は、ラベルの並び順に対応します。体裁を整えるのに特に重要だと思っているのが、Scaleブロックの「ticks」と「pointLabels」です。ticksは、チャートの目盛りを固定するための設定です。ここで最小と最大を指定しない場合のデフォルトだと、与えたデータの最小値が中心の目盛りになるなど動的に調整されてしまうので、グラフの形が変わってしまいます。あと、pointlabelsはこの赤枠の部分のフォントです。この情報は意外にないので、自分も最初わからなくて苦労しました。色の指定ですが、以下のようなカラーコード表を参照します。W3C基本16色は「red」のように名前でも指定できるので、今回はそれを使いました。www.netyasun.comあとは、ソースのコメントに書いてます。djangoからデータを受け渡す上記でグラフは表示できます。データとかをJavaScriptに直書きしてる限り、何の役にも立ちません(笑)djangoからその辺を受け渡すようにします。'レーダーサンプル'の4か所です。これらをdjangoのpythonプログラムから、以下のようにして渡します。c)dataやlabelsは、javascript側では配列データでしたが、一旦受け渡しのためにカンマ区切りの文字列にしています。理由は、プログラム側の編集も楽で、シンプルでわかりやすいから・・です(笑)。上記のHTML部分は、chart01.htmlという名前で以下のように受け取る想定です。%}"></script>hiddenタグを配置して、valueにpython側の変数を受け取っています。あとは、このhiddenタグの情報をJavaScript側で受け取ればよいです。受け取る部分だけ抜粋します。dlabel.split(',');IDでvalueを取得して、dataとlabelsの部分はStringでうけとって、カンマをデリミタにしてsplitをかけて配列データに変換してます。titleのようにリテラルの部分を変数に置き換えます。これで実行して、リテラルで指定した時と同じグラフが表示できれば、OKですね。参考にしたサイトなど日本語ドキュメントは充実してます。misc.0o0o.orgサンプルもあります。これでソースの表示をするとwww.chartjs.orgあと、英語ですが本家の方です。内容的には日本語版とほぼ同じみたいですけど。www.chartjs.org最後にソース全文ですpython(django)のソース+JavaScriptです。djangoの実行方法とかは特にここでは説明しません。インストールとか基本的なところは、こちらのカテゴリの一連の流れに則ってます。}});こんな感じです。検索スポンサーリンク最近のアクセスTOP5ブクマ数TOP3IT的なTIPS・ノウハウイベントログから抽出したログオン・オフ時刻を見やすいように整形するEXCELのVBAマクロなど。Google検索は利用するけど、アクティビティを保存させたくない時もある文字コードで悩まされるなんて久しぶり/JIS7(ISO-2022-JP)とJIS8の話もっと見る作業時によく参照する「まとめ」djangoテンプレート内でforループで回す時の整理とデフォルト辞書利用時の注意など。djangoテンプレート内ので条件分岐(IF文)で注意することなどをまとめておくdjangoテンプレート/変数の値の参照の仕方が、Pythonと違う所があるので整理しておく。service」とサーバーレスコンピューティング関係をまとめてみる。PWA・SPA・・など「最近のWEBアプリケーションの種類」をざっくりまとめる。文系的まとめディープラーニング(ニューラルネットワーク)の「学習」の肝は「微分」らしいよ。Consoleもっと見るディープラーニングのデモをやってみるWord2Vecで「単語の足し算・引き算の結果(単語)を取得する」デモをやってみる。API」で入力文の疑わしい部分をAIが指摘するデモを作る。classで事前学習済のVGG16モデルを使った画像識別クラス/tensorflow2.0(tf.keras)ランダムフォレストで回帰してみる/気象情報と電力データその2もっと見るPythonでWebアプリやってみるviews.py(python)からデータを渡して、Chart.jsでRaderチャートを描く/Chart.js+djangoWEBブラウザ上にドラッグ&ドロップした画像ファイルをBase64に変換して表示するWEBブラウザで手描きしたイメージをJPEG・PNG変換後Base64エンコードするもっと見るPythonで自動化やってみるWebアプリケーションで自動的に値を参照、スクロール他Tips/Selenium&pythonWebアプリケーションで自動的に何かをクリックするTips/Selenium&pythonWebアプリケーションへの自動入力・選択のTipsあれこれ/Selenium&pythonもっと見るPythonで数学・グラフィックスやってみるモンティ・ホール問題で、ちょっと暇つぶし。最近、台風が怖すぎる!!!生産性向上しろと言いながら、片方で足をひっぱるなんて・・と呆れてます。/軽減税率のニュースを見てもっと見るBOKU62歳の文系SE”BOKU”です。<arakan_no_boku@yahoo.co.jp>興味の向いたものを、つまみ食い的に勉強してます。自分が消化した内容を、頭の整理と備忘を兼ねてブログに書いてます。IT系・・特に機械学習・プログラムネタが中心ですが、IT以外のネタになる時もあります。(43)スポンサーリンクはてなブログをはじめよう!arakan_no_bokuさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。