{"id":6370,"date":"2022-01-25T10:24:35","date_gmt":"2022-01-25T03:24:35","guid":{"rendered":"https:\/\/www.briswell-vn.com\/?p=6370"},"modified":"2022-01-30T16:22:51","modified_gmt":"2022-01-30T09:22:51","slug":"truc-quan-hoa-du-lieu-bang-python-dash","status":"publish","type":"post","link":"https:\/\/www.briswell-vn.com\/ja\/news\/truc-quan-hoa-du-lieu-bang-python-dash\/","title":{"rendered":"Python Dash\u306b\u3088\u308b\u30c7\u30fc\u30bf\u53ef\u8996\u5316"},"content":{"rendered":"<p><\/p>\n<h1>Dash \u3068\u306f<\/h1>\n<p>Dash\u306fMIT\u30e9\u30a4\u30bb\u30f3\u30b9\u3067\u516c\u958b\u3055\u308c\u3066\u3044\u308b\u30aa\u30fc\u30d7\u30f3\u30bd\u30fc\u30b9\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u3067\u3059\u3002\u3053\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u306f\u3001Plotly.js\u3001ReactJs\u4e0a\u306b\u69cb\u7bc9\u3055\u308c\u3066\u3044\u307e\u3059\u3002Dash\u306f\u3001\u30ab\u30b9\u30bf\u30e0\u5316\u3055\u308c\u308bUI\uff08\u30e6\u30fc\u30b6\u30fc\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30a4\u30b9\uff09\u3092\u5099\u3048\u305f\u30c7\u30fc\u30bf\u53ef\u8996\u5316\u30a2\u30d7\u30ea\u3092\u69cb\u7bc9\u3059\u308b\u306e\u306b\u7406\u60f3\u7684\u3067\u3059\u3002Dash\u306f\u975e\u5e38\u306b\u7c21\u5358\u306a\u306e\u306710\u5206\u672a\u6e80\u3067UI\u3092\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u306b\u30d0\u30a4\u30f3\u30c9\u3067\u304d\u307e\u3059\u3002Dash\u306fWeb\u30d6\u30e9\u30a6\u30b6\u30fc\u306b\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3055\u308c\u308b\u305f\u3081\u3001\u30af\u30ed\u30b9\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u53ca\u3073\u30e2\u30d0\u30a4\u30eb\u30c7\u30d0\u30a4\u30b9\u3067\u5b9f\u884c\u3067\u304d\u307e\u3059\u3002<\/p>\n<h1>Dash\u5229\u7528\u306e\u3054\u6848\u5185<\/h1>\n<h3>\u8a2d\u5b9a\u65b9\u6cd5<\/h3>\n<p>\u74b0\u5883\uff1a\u7aef\u672b\u3067Python 3 \u304c\u3059\u3067\u306b\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>\u30bf\u30fc\u30df\u30ca\u30eb\u3067\u306f\u3001Dash\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u305f\u3081\u306b\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u307e\u3059\u3002<\/p>\n<p>pip install dash<\/p>\n<p>\u4e0a\u8a18\u306e\u30b3\u30de\u30f3\u30c9\u306e\u5b9f\u884c\u306b\u3088\u308a\u3001Dash\u306b\u52a0\u3048\u3066pip\u306f\u30c1\u30e3\u30fc\u30c8\u63cf\u753b\u30e9\u30a4\u30d6\u30e9\u30ea( Plotly.py)\u3082\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002<\/p>\n<p>\u6700\u5f8c\u306b\u3001\u6b21\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3059\u308b\u3053\u3068\u306b\u3088\u308aPandas\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002<\/p>\n<p>pip install pandas<\/p>\n<h1>Pandas\u306b\u3064\u3044\u3066<\/h1>\n<p>Pandas\u306f\u30aa\u30fc\u30d7\u30f3\u30bd\u30fc\u30b9\u3067BSD\u30e9\u30a4\u30bb\u30f3\u30b9\u3067\u516c\u958b\u3055\u308c\u3066\u3044\u307e\u3059\u3002Pandas\u306f\u3001Python\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u8a00\u8a9e\u7528\u306b\u9ad8\u6027\u80fd\u3067\u4f7f\u3044\u3084\u3059\u3044\u30c7\u30fc\u30bf\u69cb\u9020\u3068\u30c7\u30fc\u30bf\u5206\u6790\u30c4\u30fc\u30eb\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002<\/p>\n<p>Pandas\u306f\u3001DataFrame\u53ca\u3073Series\u3068\u3044\u3046\uff12\u3064\u306e\u4e3b\u8981\u306a\u30c7\u30fc\u30bf\u69cb\u9020\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002DataFrame\u306f\u6587\u5b57\u3001\u6574\u6570\u3001\u6d6e\u52d5\u5c0f\u6570\u70b9\u5024\u3001\u30ab\u30c6\u30b4\u30ea\u30ab\u30eb\u30c7\u30fc\u30bf\u3068\u3044\u3063\u305f\u69d8\u3005\u306a\u30bf\u30a4\u30d7\u306e\u30c7\u30fc\u30bf\u3092\u5217\u306b\u683c\u7d0d\u3067\u304d\u308b2\u6b21\u5143\u306e\u30c7\u30fc\u30bf\u69cb\u9020\u3067\u3059\u3002DataFrame\u306e\uff11\u884c\u3084\uff11\u5217\u306e\u60c5\u5831\u3082Series\u306b\u5bfe\u5fdc\u3057\u307e\u3059\u3002<\/p>\n<p>\u5217\u5f62\u5f0f\u3067\u30c7\u30fc\u30bf\u3092\u683c\u7d0d\u3059\u308b\u306b\u306f\u6b21\u306e\u4e00\u822c\u7684\u306a\u898f\u5247\u304c\uff13\u3064\u3042\u308a\u307e\u3059\u3002<\/p>\n<ul style=\"list-style-type: disc;\">\n<li style=\"list-style-type: none;\">\n<ul style=\"list-style-type: disc;\">\n<li><strong>\u9577\u3044\u5f62\u5f0f\u306e\u30c7\u30fc\u30bf\u306b\u306f<\/strong>\u3001\u89b3\u6e2c\u3054\u3068\u306b1\u3064\u306e\u884c\u304c\u3042\u308a\u3001\u5909\u6570\u3054\u3068\u306b1\u3064\u306e\u5217\u304c\u3042\u308a\u307e\u3059\u3002\u3053\u308c\u306f\u3001\u591a\u5909\u91cf\u30c7\u30fc\u30bf\u3001\u3064\u307e\u308a\u6b21\u5143\u304c2\u3088\u308a\u5927\u304d\u3044\u30c7\u30fc\u30bf\u306e\u4fdd\u5b58\u304a\u3088\u3073\u8868\u793a\u306b\u9069\u3057\u3066\u3044\u307e\u3059\u3002<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6373 size-full\" src=\"https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2021\/12\/31142643\/long_form_2.png\" alt=\"Long-form data\" width=\"298\" height=\"254\" srcset=\"https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2021\/12\/31142643\/long_form_2.png 298w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2021\/12\/31142643\/long_form_2-293x250.png 293w\" sizes=\"auto, (max-width: 298px) 100vw, 298px\" \/><\/p>\n<ul style=\"list-style-type: disc;\">\n<li style=\"list-style-type: none;\">\n<ul style=\"list-style-type: disc;\">\n<li><strong>\u30ef\u30a4\u30c9\u30d5\u30a9\u30fc\u30e0\u30c7\u30fc\u30bf\u306b\u306f<\/strong>\u3001\u6700\u521d\u306e\u5909\u6570\u306e1\u3064\u306e\u5024\u3054\u3068\u306b1\u3064\u306e\u884c\u304c\u3042\u308a\u30012\u756a\u76ee\u306e\u5909\u6570\u306e\u5024\u3054\u3068\u306b1\u3064\u306e\u5217\u304c\u3042\u308a\u307e\u3059\u3002\u3053\u308c\u306f\u30012\u6b21\u5143\u30c7\u30fc\u30bf\u306e\u4fdd\u5b58\u304a\u3088\u3073\u8868\u793a\u306b\u9069\u3057\u3066\u3044\u307e\u3059\u3002<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6374 size-full\" src=\"https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2021\/12\/31142738\/wide_form_2.png\" alt=\"wide-form data\" width=\"433\" height=\"84\" srcset=\"https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2021\/12\/31142738\/wide_form_2.png 433w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2021\/12\/31142738\/wide_form_2-300x58.png 300w\" sizes=\"auto, (max-width: 433px) 100vw, 433px\" \/><\/p>\n<ul style=\"list-style-type: disc;\">\n<li style=\"list-style-type: none;\">\n<ul style=\"list-style-type: disc;\">\n<li><strong>\u6df7\u5408\u5f62\u5f0f\u306e\u30c7\u30fc\u30bf\u306f<\/strong>\u3001\u9577\u3044\u5f62\u5f0f\u3068\u5e83\u3044\u5f62\u5f0f\u306e\u30c7\u30fc\u30bf\u306e\u30cf\u30a4\u30d6\u30ea\u30c3\u30c9\u3067\u3059\u3002<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6375 size-full\" src=\"https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2021\/12\/31142805\/mixed_form.png\" alt=\"mixed-form data\" width=\"603\" height=\"189\" srcset=\"https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2021\/12\/31142805\/mixed_form.png 603w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2021\/12\/31142805\/mixed_form-300x94.png 300w\" sizes=\"auto, (max-width: 603px) 100vw, 603px\" \/><\/p>\n<h1>Dash\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u306b\u3064\u3044\u3066<\/h1>\n<p>Dash\u30a2\u30d7\u30ea\u306f\u30ec\u30a4\u30a2\u30a6\u30c8\u53ca\u3073\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u3068\u3044\u3046\uff12\u3064\u306e\u4e3b\u8981\u90e8\u5206\u3067\u69cb\u6210\u3055\u308c\u3066\u3044\u307e\u3059\u3002\u30ec\u30a4\u30a2\u30a6\u30c8\u306f\u3001\u30a2\u30d7\u30ea\u304c\u3069\u306e\u3088\u3046\u306b\u8868\u793a\u3055\u308c\u308b\u304b\u3092\u793a\u3057\u307e\u3059\u3002\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u306f\u3001\u30a2\u30d7\u30ea\u306e\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u6027\u3092\u793a\u3057\u307e\u3059\u3002<\/p>\n<p>\u300c\u30ec\u30a4\u30a2\u30a6\u30c8\u300d\u306f\u5404\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u7d44\u3080\u30c4\u30ea\u30fc\u3067\u3059\u3002<\/p>\n<p>Dash\u306fDashHTML\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3001Dash\u30b3\u30a2\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3001Dash\u30c7\u30fc\u30bf\u30c6\u30fc\u30d6\u30eb\u3001Dash DAQ\u3001DashBootstrap\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306a\u3069\u306e\u591a\u7a2e\u985e\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002<\/p>\n<p>\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001DashHTML\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u53ca\u3073Dash\u30b3\u30a2\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u307e\u3059\u3002<\/p>\n<h1>DashHTML\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8<\/h1>\n<p>\u30ec\u30a4\u30a2\u30a6\u30c8\u306eHTML\u30bf\u30b0\u3092\u5b9a\u7fa9\u3059\u308b\u305f\u3081\u306b\u7528\u3044\u3089\u308c\u308bHTML\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u63d0\u4f9b\u3059\u308b\u95a2\u6570\u3067\u3059\u3002<\/p>\n<p>Dash HTML\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u4f7f\u7528\u3092\u958b\u59cb\u3059\u308b\u306b\u306f\u3001\u6b21\u306e\u3088\u3046\u306b.py\u30d5\u30a1\u30a4\u30eb\u306b\u30a4\u30f3\u30dd\u30fc\u30c8\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<p><span style=\"font-weight: 400;\"><code>from dash import html<\/code><\/span><\/p>\n<p>\u4f8b:<\/p>\n<p><em><span style=\"font-weight: 400;\">html_demo.py<\/span><\/em><\/p>\n<pre>import dash\r\nfrom dash import html\r\n\r\napp = dash.Dash(__name__)\r\n\r\napp.layout = html.Div(children=[\r\n   html.H1(children='Hello Dash'),\r\n])\r\n\r\nif __name__ == '__main__':\r\n   app.run_server(debug=True)\r\n<\/pre>\n<p><code>\u300chtml.H1(children='Hello Dash')\u300d`<\/code>\u306f\u30d6\u30e9\u30a6\u30b6\u3067<code>\u300c&lt;h1&gt;Hello Dash&lt;\/h1&gt;\u300d`<\/code>\u3092\u751f\u6210\u3057\u307e\u3059\u3002<\/p>\n<p><span style=\"font-weight: 400;\">CHTML\u30bf\u30b0\u3068\u540c\u69d8\u306b\u300cstyle\u300d\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u4f7f\u7528\u3057\u3066html_component\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u5909\u66f4\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><code>\u4f8b\uff1ahtml.H1('Hello Dash', style={'textAlign': 'center', 'color': '#7FDBFF'})<\/code><\/span><\/p>\n<p>\u4e0a\u8a18\u306e\u30b3\u30fc\u30c9\u306f<code>\u300c&lt;h1 style=\"text-align: center; color: #7FDBFF\"&gt;Hello Dash&lt;\/h1&gt;\u300d<\/code>\u3068\u3057\u3066\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n<p>DashHTML\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3068HTML\u5c5e\u6027\u306e\u9593\u306b\u306f\u3044\u304f\u3064\u304b\u306e\u91cd\u8981\u306a\u76f8\u9055\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<ul style=\"list-style-type: disc;\">\n<li>HTML\u306e\u300cstyle\u300d\u3068\u3044\u3046\u30d7\u30ed\u30d1\u30c6\u30a3\u306f\u30bb\u30df\u30b3\u30ed\u30f3\u3067\u533a\u5207\u3089\u308c\u305f\u6587\u5b57\u5217\u3067\u3059\u3002Dash\u3067\u306f\u3001dictionary\uff08\u8f9e\u66f8\uff09\u3092\u63d0\u4f9b\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/li>\n<li>dictionary\u306e\u30ad\u30fc\u540d\u306f\u30ad\u30e3\u30e1\u30eb\u30b1\u30fc\u30b9\u5f62\u5f0f\u306b\u306a\u308a\u307e\u3059\u3002 \u3057\u305f\u304c\u3063\u3066\u300ctext-align\u300d\u306e\u4ee3\u308f\u308a\u306b\u3001Dash\u3067\u300ctextAlign\u300d\u306b\u306a\u308a\u307e\u3059\u3002<\/li>\n<li>HTML\u306e\u300cclass\u300d\u3068\u3044\u3046\u30d7\u30ed\u30d1\u30c6\u30a3\u306f\u3001Dash\u3067\u300cclassName\u300d\u306b\u306a\u308a\u307e\u3059\u3002<\/li>\n<li>HTML\u30bf\u30b0\u306e\u5b50\u8981\u7d20\u306f\u300cchildren\u300d\u30ad\u30fc\u30ef\u30fc\u30c9\u3092\u4f7f\u7528\u3057\u305f\u5f15\u6570\u3092\u4ecb\u3057\u3066\u6307\u5b9a\u3055\u308c\u307e\u3059\u3002<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">\u307e\u305f\u3001\u30b9\u30bf\u30a4\u30eb\u3092\u76f4\u63a5\u4f7f\u7528\u3059\u308b\u4ee3\u308f\u308a\u306b\u3001\u30ec\u30a4\u30a2\u30a6\u30c8\u306b\u30b9\u30bf\u30a4\u30eb\u3092\u5b9a\u7fa9\u3059\u308b\u305f\u3081\u306bCSS\u30d5\u30a1\u30a4\u30eb\u3092\u5229\u7528\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002 \u8a73\u7d30\u306f\u4e0b\u8a18\u306eURL\u3092\u3054\u53c2\u7167\u304f\u3060\u3055\u3044\u3002<\/span><\/p>\n<p><a href=\"https:\/\/dash.plotly.com\/external-resources\"><span style=\"font-weight: 400;\">https:\/\/dash.plotly.com\/external-resources<\/span><\/a><\/p>\n<p>\u5229\u7528\u53ef\u80fd\u306a\u3059\u3079\u3066\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306fHTML Components Gallery\u3067\u78ba\u8a8d\u3067\u304d\u307e\u3059\u3002<\/p>\n<p><a href=\"https:\/\/dash.plotly.com\/dash-html-components\"><span style=\"font-weight: 400;\">https:\/\/dash.plotly.com\/dash-html-components<\/span><\/a><\/p>\n<h1>Dash\u30b3\u30a2\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8<\/h1>\n<p>\u30c9\u30ed\u30c3\u30d7\u30c0\u30a6\u30f3\u3001\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u3001\u30e9\u30b8\u30aa\u3001\u30b0\u30e9\u30d5\u3068\u3044\u3063\u305f\u9ad8\u30ec\u30d9\u30eb\u306e\u5404\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30bb\u30c3\u30c8\u3092\u542b\u3081\u308b\u3082\u306e\u3067\u3059\u3002 \u5229\u7528\u53ef\u80fd\u306a\u3059\u3079\u3066\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306fDash Core Components Gallery\u3067\u78ba\u8a8d\u3067\u304d\u307e\u3059\u3002<\/p>\n<p><a href=\"https:\/\/dash.plotly.com\/dash-core-components\"><span style=\"font-weight: 400;\">https:\/\/dash.plotly.com\/dash-core-components<\/span><\/a><\/p>\n<p>Dash\u30b3\u30a2\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u4f7f\u7528\u3092\u958b\u59cb\u3059\u308b\u306b\u306f\u3001\u6b21\u306e\u3088\u3046\u306b.py\u30d5\u30a1\u30a4\u30eb\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<p><span style=\"font-weight: 400;\"><code>from dash import dcc<\/code><\/span><\/p>\n<p>\u5404\u30b3\u30a2\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u4e2d\u306b\u300cGraph\u300d\u306f\u30c7\u30fc\u30bf\u53ef\u8996\u5316\u306b\u3068\u3063\u3066\u91cd\u8981\u306a\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u3059\u3002\u300cGraph\u300d\u306f\u3001Plotly.js\u3068\u3044\u3046JavaScript\u30aa\u30fc\u30d7\u30f3\u30bd\u30fc\u30b9\u30b0\u30e9\u30d5\u4f5c\u6210\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u4f7f\u7528\u3057\u3066\u30d6\u30e9\u30a6\u30b6\u3078\u30c7\u30fc\u30bf\u306e\u53ef\u8996\u5316\u3092\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3059\u308b\u3082\u306e\u3067\u3059\u3002Plotly.js\u306f35\u7a2e\u985e\u4ee5\u4e0a\u306e\u30c1\u30e3\u30fc\u30c8\u30bf\u30a4\u30d7\u3092\u30b5\u30dd\u30fc\u30c8\u3057\u3001\u30d9\u30af\u30bf\u30fc\u54c1\u8cea\u306eSVG\u53ca\u3073\u9ad8\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306eWebGL\u5f62\u5f0f\u3067\u30c1\u30e3\u30c3\u30c8\u3092\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3055\u305b\u307e\u3059\u3002\u6ce8\u610f\u3059\u3079\u304d\u70b9\u3068\u3057\u3066\u306fPlotly.js\u306f\u30d6\u30e9\u30a6\u30b6\u3078\u306e\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u306b\u306e\u307f\u4f7f\u7528\u3055\u308c\u3066\u3044\u307e\u3059\uff08\u3053\u308c\u304cDash\u3067\u884c\u308f\u308c\u308b\uff09\u304c\u3001\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u3059\u308b\u6642\u306b\u306f\u3001Javascript\u3067\u76f4\u63a5\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u305b\u305a\u306bPlotly.py\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u4f7f\u7528\u3057\u307e\u3059\uff08\u3053\u308c\u304cDash\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u6642\u306b\u63d0\u4f9b\u3055\u308c\u308b\uff09\u3002<\/p>\n<p>Graph\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u4f7f\u7528\u65b9\u6cd5\u306b\u3064\u3044\u3066\u306f\u3001csv\u30c7\u30fc\u30bf\u3092\u6298\u308c\u7dda\u30b0\u30e9\u30d5\u3068\u3057\u3066\u30d6\u30e9\u30a6\u30b6\u3078\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3059\u308b\u4f8b\u3092\u898b\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n<p><em><span style=\"font-weight: 400;\">csv\/graph_sample.csv<\/span><\/em><\/p>\n<pre>DateTime,DATA 1,DATA 2,DATA 3,DATA 4\r\n20211220 101010.000,30,100,124,197\r\n20211220 101010.010,40,110,134,65\r\n20211220 101010.020,50,140,214,149\r\n20211220 101010.030,60,150,169,-98\r\n20211220 101010.040,70,160,204,-173\r\n20211220 101010.050,80,170,164,-108\r\n20211220 101010.060,90,180,148,150\r\n20211220 101010.070,100,190,180,92\r\n20211220 101010.080,110,200,268,94\r\n20211220 101010.090,120,210,164,-139\r\n20211220 101010.100,130,220,254,-132\r\n<\/pre>\n<p>\u307e\u305a\u3001csv\u30d5\u30a1\u30a4\u30eb\u3092\u8aad\u307f\u8fbc\u3080\u305f\u3081\u306bpandas\u3092\u4f7f\u7528\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<pre>df = pd.read_csv('csv\/graph_sample.csv')<\/pre>\n<p>\u5909\u6570\u300cdf\u300d\u3092\u30b3\u30f3\u30bd\u30fc\u30eb\u306b\u5370\u5237\u3057\u3066\u3001\u305d\u306e\u69cb\u9020\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002<\/p>\n<pre>print(df)<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6376 size-full\" src=\"https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2021\/12\/31144341\/example_wide_form.png\" alt=\"example wide-form\" width=\"461\" height=\"267\" srcset=\"https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2021\/12\/31144341\/example_wide_form.png 461w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2021\/12\/31144341\/example_wide_form-300x174.png 300w\" sizes=\"auto, (max-width: 461px) 100vw, 461px\" \/><\/p>\n<p>\u3053\u3061\u3089\u306e\u5f62\u5f0f\u306f\u899a\u3048\u3066\u3044\u307e\u3059\u304b\uff1f \u305d\u3046\u3067\u3059\u3002\u5148\u307b\u3069\u4e0a\u8a18\u3067\u8a00\u53ca\u3055\u308c\u3066\u3044\u305fPandas\u306e\u5e83\u3044\u5f62\u5f0f\u306e\u30c7\u30fc\u30bf\u3067\u3059\uff01<\/p>\n<p>\u6b21\u306f\u3001DateTime\u5217\u306e\u30c7\u30fc\u30bf\u3092string\u304b\u3089datetime\u306b\u5909\u63db\u3057\u3066\u3001\u30b0\u30e9\u30d5\u306b\u30c7\u30fc\u30bf\u306e\u65e5\u6642\u304c\u6b63\u3057\u304f\u8868\u793a\u3055\u308c\u308b\u3088\u3046\u306b\u3057\u307e\u3059\u3002<\/p>\n<pre>df['DateTime'] = pd.to_datetime(df['DateTime'], format='%Y%m%d %H:%M:%S.%f')<\/pre>\n<p>\u305d\u3057\u3066\u3001plotly express\u3067line figure\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n<pre>line_fig = px.line(df, x='DateTime', y=['DATA 1', 'DATA 2', 'DATA 3', 'DATA 4'])<\/pre>\n<p>Graph\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306bfigure\u3092\u5f15\u304d\u6e21\u3057\u307e\u3059\u3002<\/p>\n<pre>app.layout = html.Div(children=[\r\n    dcc.Graph(id='graph', figure=line_fig)\r\n])<\/pre>\n<p>\u5b8c\u5168\u306a\u30b3\u30fc\u30c9\u306f\u4e0b\u8a18\u306e\u3088\u3046\u3067\u3059\u3002<br \/>\n<em><span style=\"font-weight: 400;\">graph_demo.py<\/span><\/em><\/p>\n<pre>import dash\r\nimport pandas as pd\r\nimport plotly.express as px\r\nfrom dash import dcc\r\nfrom dash import html\r\n\r\napp = dash.Dash(__name__)\r\n\r\ndf = pd.read_csv('csv\/graph_sample.csv')\r\nprint(df)\r\ndf['DateTime'] = pd.to_datetime(df['DateTime'], format='%Y%m%d %H:%M:%S.%f')\r\n\r\nline_fig = px.line(df, x='DateTime', y=['DATA 1', 'DATA 2', 'DATA 3', 'DATA 4'])\r\n\r\napp.layout = html.Div(children=[\r\n   dcc.Graph(id='graph', figure=line_fig)\r\n])\r\n\r\nif __name__ == '__main__':\r\n   app.run_server(debug=True)\r\n<\/pre>\n<p>\u30bf\u30fc\u30df\u30ca\u30eb\u3067\u306f\u6b21\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u307e\u3059\u3002<br \/>\n<code>python graph_demo.py<\/code><br \/>\n\u6700\u5f8c\u306b\u3001<\/p>\n<p><a href=\"http:\/\/127.0.0.1:8050\/\"><span style=\"font-weight: 400;\">http:\/\/127.0.0.1:8050\/<\/span><\/a><span style=\"font-weight: 400;\"> \u306b\u30a2\u30af\u30bb\u30b9\u3057\u3066\u7d50\u679c\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6377 size-full\" src=\"https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2021\/12\/31144923\/example_graph.png\" alt=\"graph example\" width=\"1358\" height=\"494\" srcset=\"https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2021\/12\/31144923\/example_graph.png 1358w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2021\/12\/31144923\/example_graph-300x109.png 300w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2021\/12\/31144923\/example_graph-1024x373.png 1024w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2021\/12\/31144923\/example_graph-768x279.png 768w\" sizes=\"auto, (max-width: 1358px) 100vw, 1358px\" \/><\/p>\n<p>\u4e0a\u8a18\u306e\u4f8b\u306e\u4e2d\u306b\u306f\u3001<\/p>\n<ul style=\"list-style-type: disc;\">\n<li>Pandas\u30e9\u30a4\u30d6\u30e9\u30ea\u306f\u3001\u5165\u529b\u30c7\u30fc\u30bf\u3092\u51e6\u7406\u3059\u308b\u305f\u3081\u306b\u7528\u3044\u3089\u308c\u307e\u3059\uff08csv\u3092\u8aad\u307f\u53d6\u308a\u3001DateTime\u5217\u306e\u30c7\u30fc\u30bf\u3092string\u304b\u3089datetime\u306b\u5909\u63db\u3059\u308b\uff09\u3002<\/li>\n<li>Plotly.py\u30e9\u30a4\u30d6\u30e9\u30ea\u306b\u3042\u308bPlotly Express\u306f\u3001\u51fa\u529bGraph\u306e\u30b0\u30e9\u30d5\u30bf\u30a4\u30d7\uff08\u6298\u308c\u7dda\u56f3\u3001\u6563\u5e03\u56f3\uff09\u3001x\u8ef8\u3001y\u8ef8\u306a\u3069\u3092\u6307\u5b9a\u3059\u308b\u5f79\u5272\u3092\u62c5\u3044\u307e\u3059\u3002<\/li>\n<\/ul>\n<h1>Dash\u30b3\u30fc\u30eb\u30d0\u30c3\u30af<\/h1>\n<p>\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u306f\u5225\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\uff08\u51fa\u529b\uff09\u306e\u4e00\u90e8\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u66f4\u65b0\u3059\u308b\u305f\u3081\u306b\u3001\u5165\u529b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u304c\u5909\u66f4\u3055\u308c\u308b\u305f\u3073\u306bDash\u306b\u3088\u3063\u3066\u81ea\u52d5\u7684\u306b\u547c\u3073\u51fa\u3055\u308c\u308b\u3082\u306e\u3067\u3059\u3002<\/p>\n<p>\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u3092\u3088\u308a\u6df1\u304f\u7406\u89e3\u3059\u308b\u306b\u306f\u3001dcc.DatePickerRange\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304b\u3089\u306e\u5165\u529b\u3092\u4f7f\u7528\u3057\u3066\u65e5\u4ed8\u3067\u30c7\u30fc\u30bf\u3092\u30d5\u30a3\u30eb\u30bf\u30fc\u3059\u308b\u4f8b\u3092\u898b\u3066\u307f\u307e\u3057\u3087\u3046\u3002<br \/>\n<em><span style=\"font-weight: 400;\">csv\/callbacks_sample.csv<\/span><\/em><\/p>\n<pre>DateTime,DATA 1,DATA 2,DATA 3,DATA 4\r\n20211219 101010.010,10,200,178,90\r\n20211219 111010.020,20,150,134,25\r\n20211219 121010.030,5,130,210,11\r\n20211219 131010.040,15,110,100,-97\r\n20211219 141010.050,60,150,143,-17\r\n20211219 151010.060,30,140,132,30\r\n20211219 161010.070,20,180,167,45\r\n20211219 171010.080,16,120,240,123\r\n20211219 181010.090,75,190,153,40\r\n20211219 191010.100,90,250,162,-10\r\n20211220 001010.000,68,142,156,1\r\n20211220 011010.010,40,110,134,65\r\n20211220 021010.020,50,140,214,149\r\n20211220 031010.030,60,150,169,-98\r\n20211220 041010.040,70,160,204,-173\r\n20211220 051010.050,80,170,164,-108\r\n20211220 061010.060,90,180,148,150\r\n20211220 071010.070,100,190,180,92\r\n20211220 081010.080,110,200,268,94\r\n20211220 091010.090,120,210,164,-139\r\n20211220 101010.100,130,220,254,-132\r\n20211221 001010.000,10,90,142,30\r\n20211221 011010.010,30,100,162,55\r\n20211221 021010.020,80,120,180,20\r\n20211221 031010.030,70,110,176,-10\r\n20211221 041010.040,50,130,194,-90\r\n20211221 051010.050,60,140,202,-120\r\n20211221 061010.060,90,150,164,100\r\n20211221 071010.070,120,160,197,132\r\n20211221 081010.080,110,170,186,40\r\n20211221 091010.090,130,210,182,-130\r\n20211221 101010.100,120,230,210,-100\r\n<\/pre>\n<p><em><span style=\"font-weight: 400;\">callbacks_demo.py<\/span><\/em><\/p>\n<pre>from datetime import datetime, timedelta\r\n\r\nimport dash\r\nimport pandas as pd\r\nimport plotly.express as px\r\nfrom dash import dcc, Output, Input\r\nfrom dash import html\r\n\r\napp = dash.Dash(__name__)\r\n\r\ndf = pd.read_csv('csv\/callbacks_sample.csv')\r\ndf['DateTime'] = pd.to_datetime(df['DateTime'], format='%Y%m%d %H:%M:%S.%f')\r\n\r\ninit_start_date = df['DateTime'].min().strftime('%Y-%m-%d')\r\ninit_end_date = df['DateTime'].max().strftime('%Y-%m-%d')\r\n\r\napp.layout = html.Div(children=[\r\n   dcc.DatePickerRange(\r\n       id='date-picker-range',\r\n       start_date=init_start_date,\r\n       end_date=init_end_date,\r\n       minimum_nights=0,\r\n       display_format='YYYY\/MM\/DD'\r\n   ),\r\n   dcc.Graph(id='scatter-graph'),\r\n])\r\n\r\n\r\n@app.callback(\r\n   Output('scatter-graph', 'figure'),\r\n   Input('date-picker-range', 'start_date'),\r\n   Input('date-picker-range', 'end_date')\r\n)\r\ndef update_figure(start_date, end_date):\r\n   if start_date is not None and end_date is not None:\r\n       start_date = datetime.fromisoformat(start_date)\r\n       end_date = datetime.fromisoformat(end_date) + timedelta(days=1)\r\n       filtered_df = df[(start_date &lt;= df['DateTime']) &amp; (df['DateTime'] &lt;= end_date)]\r\n       scatter_fig = px.scatter(filtered_df, x='DateTime', y=['DATA 1', 'DATA 2', 'DATA 3', 'DATA 4'])\r\n\r\n       return scatter_fig\r\n\r\n\r\nif __name__ == '__main__':\r\n   app.run_server(debug=True)\r\n<\/pre>\n<p>Dash\u3067\u306f\u3001\u30a2\u30d7\u30ea\u306e\u5165\u529b\u3068\u51fa\u529b\u306f\u5358\u306b\u7279\u5b9a\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u306b\u3059\u304e\u307e\u305b\u3093\u3002\u3053\u306e\u4f8b\u3067\u306f\u3001\u5165\u529b\u306f\u300cdate-picker-range\u300dID\u3092\u6301\u3064\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u300cstart_date\u300d\u53ca\u3073\u300cend_date\u300d\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u3042\u308a\u3001\u51fa\u529b\u306f\u300cscatter-graph\u300dID\u3092\u6301\u3064\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u300cfigure\u300d\u30d7\u30ed\u30d1\u30c6\u30a3\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>@callback\u30c7\u30b3\u30ec\u30fc\u30bf\u30fc\u304c\u5ba3\u8a00\u3055\u308c\u305f\u95a2\u6570\u306f\u3001\u5165\u529b\u30d7\u30ed\u30d1\u30c6\u30a3\u304c\u5909\u66f4\u3055\u308c\u308b\u305f\u3073\u306b\u81ea\u52d5\u7684\u306b\u547c\u3073\u51fa\u3055\u308c\u307e\u3059\u3002 Dash\u306f\u3001\u5165\u529b\u30d7\u30ed\u30d1\u30c6\u30a3\u306b\u65b0\u3057\u304f\u5165\u529b\u3055\u308c\u305f\u5024\u3092\u5165\u529b\u5f15\u6570\u3068\u3057\u3066\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u306b\u63d0\u4f9b\u3057\uff08\u4e0a\u8a18\u306e\u4f8b\u3067update_figure\u95a2\u6570\u306f\u300cstart_date\u300d\u3001\u300cend_date\u300d\u3068\u3044\u3046\uff12\u3064\u306e\u5f15\u6570\u3092\u6301\u3064\uff09\u3001\u95a2\u6570\u306e\u623b\u308a\u5024\u3092\u51fa\u529b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u306b\u66f4\u65b0\u3057\u307e\u3059\u3002\uff08\u4e0a\u8a18\u306e\u4f8b\u3067update_figure\u95a2\u6570\u306fscatter_fig\u3092\u8fd4\u5374\uff09<\/p>\n<p>\u30bf\u30fc\u30df\u30ca\u30eb\u3067<code>python callbacks_demo.py<\/code>\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3001<a href=\"http:\/\/127.0.0.1:8050\/\">http:\/\/127.0.0.1:8050\/<\/a>\u306b\u30a2\u30af\u30bb\u30b9\u3057\u3066\u7d50\u679c\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6378 size-full\" src=\"https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2021\/12\/31145606\/callback_demo_pic1.png\" alt=\"Callbacks demo 1\" width=\"1363\" height=\"507\" srcset=\"https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2021\/12\/31145606\/callback_demo_pic1.png 1363w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2021\/12\/31145606\/callback_demo_pic1-300x112.png 300w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2021\/12\/31145606\/callback_demo_pic1-1024x381.png 1024w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2021\/12\/31145606\/callback_demo_pic1-768x286.png 768w\" sizes=\"auto, (max-width: 1363px) 100vw, 1363px\" \/><\/p>\n<p>end_date\u3092\u5909\u66f4\u3057\u305f\u5f8c\u306e\u7d50\u679c<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6379 size-full\" src=\"https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2021\/12\/31145648\/callbacks_demo_pic2.png\" alt=\"Callbacks demo 2\" width=\"1361\" height=\"514\" srcset=\"https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2021\/12\/31145648\/callbacks_demo_pic2.png 1361w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2021\/12\/31145648\/callbacks_demo_pic2-300x113.png 300w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2021\/12\/31145648\/callbacks_demo_pic2-1024x387.png 1024w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2021\/12\/31145648\/callbacks_demo_pic2-768x290.png 768w\" sizes=\"auto, (max-width: 1361px) 100vw, 1361px\" \/><\/p>\n<h1>\u6700\u9069\u5316\u53ca\u3073\u6a5f\u80fd\u8ffd\u52a0<\/h1>\n<p>\u3053\u306e\u90e8\u5206\u3067\u306f\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u306e\u30b3\u30fc\u30c9\u3092\u4f7f\u7528\u3057\u3066\u305d\u306e\u30b3\u30fc\u30c9\u306b\u6700\u9069\u5316\u3057\u3066\u6a5f\u80fd\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n<h4>\u30c7\u30fc\u30bf\u6570n\u3092\u8aad\u307f\u53d6\u308a\u307e\u3059\u3002<\/h4>\n<p>\u73fe\u5728\u3001\u5165\u529b\u30c7\u30fc\u30bf\u306e\u6570\u30924\u500b\u306b\u56fa\u5b9a\u306b\u8a2d\u5b9a\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<pre>scatter_fig = px.scatter(filtered_df, x='DateTime', y=['DATA 1', 'DATA 2', 'DATA 3', 'DATA 4'])<\/pre>\n<p>\u3082\u3057\u5165\u529b\u30c7\u30fc\u30bf\u304c\u300cDATA 1, DATA 2,&#8230;, DATA n\u300d\u3069\u3093\u306a\u91cf\u3067\u3082\u3042\u308b\u3068\u3059\u308b\u3068\u3001\u4e0a\u8a18\u306e\u30b3\u30fc\u30c9\u3067\u306f4\u500b\u306e\u30c7\u30fc\u30bf\u3057\u304b\u8aad\u307f\u53d6\u3063\u3066\u8868\u793a\u3067\u304d\u307e\u305b\u3093\u3002<br \/>\n\u30c7\u30fc\u30bf\u6570n\u3092\u8aad\u307f\u53d6\u3063\u3066\u30b0\u30e9\u30d5\u3078\u8868\u793a\u3059\u308b\u306b\u306f\u3001\u30b3\u30fc\u30c9\u3092\u5c11\u3057\u4fee\u6b63\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<pre># get first columns name for x-axis\r\nx_col_name = df.columns[0]\r\n# get list column name except first column for y-axis\r\ny_col_name_list = df.columns[1:]\r\nfiltered_df = df[(start_date &lt;= df[x_col_name]) &amp; (df[x_col_name] &lt;= end_date)]\r\nscatter_fig = px.scatter(filtered_df, x=x_col_name, y=y_col_name_list)<\/pre>\n<h4>CSV\u306e\u30d8\u30c3\u30c0\u30fc\u304b\u3089config\u3092\u8aad\u307f\u53d6\u308a\u307e\u3059\u3002<\/h4>\n<p>CSV\u306e\u30d8\u30c3\u30c0\u30fc\u3092\u6b21\u306e\u3088\u3046\u306b\u8003\u3048\u307e\u3059\u3002<\/p>\n<pre>DateTime(yyyyMMdd HH:mm:ss.fff),DATA 1(minFilter=20;maxFilter=100),DATA 2(maxFilter=140),DATA 3,DATA 4,DATA 5<\/pre>\n<p>\u4e0a\u8a18\u306e\u30d8\u30c3\u30c0\u30fc\u304b\u3089config\u3092\u8aad\u307f\u53d6\u308b\u6a5f\u80fd\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n<ul style=\"list-style-type: disc;\">\n<li style=\"font-weight: 400;\">DateTime\u5217\u306econfig\u3092\u8aad\u307f\u53d6\u3063\u3066\u65e5\u6642\u306e\u5f62\u5f0f\u3092\u8a2d\u5b9a\u3057\u307e\u3059\uff08\u73fe\u5728\u3001\u30b3\u30fc\u30c9\u3067\u56fa\u5b9a\u306b\u8a2d\u5b9a\u3055\u308c\u3066\u3044\u308b\uff09\u3002<\/li>\n<li>DATA\u5217\u306emaxFilter\u3001minFilter\u306econfig\u3092\u8aad\u307f\u53d6\u308a\u305d\u306eDATA\u5217\u306eminFilter\u3088\u308a\u5c0f\u3055\u304fmaxFilter\u3088\u308a\u5927\u304d\u3044\u5024\u306e\u30c7\u30fc\u30bf\u3092\u9664\u5916\u3057\u307e\u3059\u3002<\/li>\n<\/ul>\n<p>\u307e\u305a\u3001\u5171\u901a\u95a2\u6570\u3092\u542b\u3081\u308butils.py\u30d5\u30a1\u30a4\u30eb\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n<pre>import re\r\n\r\n_format_convertor = (\r\n   ('yyyy', '%Y'), ('yyy', '%Y'), ('yy', '%y'), ('y', '%y'),\r\n   ('MMMM', '%B'), ('MMM', '%b'), ('MM', '%m'), ('M', '%m'),\r\n   ('dddd', '%A'), ('ddd', '%a'), ('dd', '%d'), ('d', '%d'),\r\n   ('HH', '%H'), ('H', '%H'), ('hh', '%I'), ('h', '%I'),\r\n   ('mm', '%M'), ('m', '%M'),\r\n   ('ss', '%S'), ('s', '%S'),\r\n   ('tt', '%p'), ('t', '%p'),\r\n   ('fff', '%f'),\r\n   ('zzz', '%z'), ('zz', '%z'), ('z', '%z'),\r\n)\r\n\r\n\r\ndef convert_py_datetime_format(in_format):\r\n   out_format = ''\r\n   while in_format:\r\n       if in_format[0] == \"'\":\r\n           apos = in_format.find(\"'\", 1)\r\n           if apos == -1:\r\n               apos = len(in_format)\r\n           out_format += in_format[1:apos].replace('%', '%%')\r\n           in_format = in_format[apos + 1:]\r\n       elif in_format[0] == '\\\\':\r\n           out_format += in_format[1:2].replace('%', '%%')\r\n           in_format = in_format[2:]\r\n       else:\r\n           for intok, outtok in _format_convertor:\r\n               if in_format.startswith(intok):\r\n                   out_format += outtok\r\n                   in_format = in_format[len(intok):]\r\n                   break\r\n           else:\r\n               out_format += in_format[0].replace('%', '%%')\r\n               in_format = in_format[1:]\r\n   return out_format\r\n\r\n\r\ndef extract_csv_col_config(col_name: str):\r\n   try:\r\n       found = re.search('\\\\((.*)\\\\)', col_name)\r\n       col_name = col_name.replace(found.group(0), '')\r\n       config_string = found.group(1)\r\n       config_list = config_string.split(';')\r\n       configs = []\r\n       for config in config_list:\r\n           key_value_list = config.split('=')\r\n           key = key_value_list[0]\r\n           value = key_value_list[1] if len(key_value_list) &gt; 1 else None\r\n           configs.append((key, value))\r\n   except AttributeError:\r\n       configs = []\r\n   return col_name, configs\r\n<\/pre>\n<p>\u4e0a\u8a18\u306e\u30b3\u30fc\u30c9\u306b\u306f\u3001<\/p>\n<ul style=\"list-style-type: disc;\">\n<li>convert_py_datetime_format\u95a2\u6570\u306f\u3001yyyyMMdd HH:mm:ss.fff\u306e\u5f62\u5f0f\u3092Python\u5f62\u5f0f\u306b\u5909\u63db\u3059\u308b\u305f\u3081\u306b\u7528\u3044\u3089\u308c\u307e\u3059\u3002<\/li>\n<li>extract_csv_col_config\u95a2\u6570\u306f\u3001config\u3092\u542b\u3080\u5217\u540d\u3092\u53d7\u3051\u53d6\u308a\u3001config\u6587\u5b57\u5217\u304c\u9664\u5916\u3055\u308c\u305f\u5217\u540d\u53ca\u3073\u305d\u306e\u5217\u306econfig\u3092\u542b\u3080array\u3092\u8fd4\u3057\u307e\u3059\u3002\u4f8b\u3048\u3070\u3001DATA 1(minFilter=20;maxFilter=100)\u306f\u3001DATA 1\u3068array [(minFilter, 20), (maxFilter, 100)]\u3092\u8fd4\u3057\u307e\u3059\u3002<\/li>\n<\/ul>\n<p>\u6b21\u306b\u3001process_csv_variable\u95a2\u6570\u3092app.py\u306b\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n<pre>from datetime import datetime, timedelta\r\n\r\nimport dash\r\nimport numpy as np\r\nimport pandas as pd\r\nimport plotly.express as px\r\nfrom dash import dcc, Output, Input\r\nfrom dash import html\r\n\r\nfrom utils import extract_csv_col_config, convert_py_datetime_format\r\n\r\n\r\ndef process_csv_variable(df_param):\r\n   # process x-axis csv variable\r\n   old_x_col_name = df_param.columns[0]\r\n   new_x_col_name, configs = extract_csv_col_config(old_x_col_name)\r\n   datetime_format = configs[0][0]\r\n   df_param = df_param.rename(columns={old_x_col_name: new_x_col_name})\r\n   df_param[new_x_col_name] = pd.to_datetime(df_param[new_x_col_name],\r\n                                             format=convert_py_datetime_format(datetime_format))\r\n   # process y-axis csv variable\r\n   y_col_name_list = df_param.columns[1:]\r\n   for old_y_col_name in y_col_name_list:\r\n       new_y_col_name, configs = extract_csv_col_config(old_y_col_name)\r\n       df_param = df_param.rename(columns={old_y_col_name: new_y_col_name})\r\n       for config, value in configs:\r\n           if config == 'minFilter':\r\n               df_param.loc[df_param[new_y_col_name] &lt; int(value), new_y_col_name] = np.nan\r\n           elif config == 'maxFilter':\r\n               df_param.loc[df_param[new_y_col_name] &gt; int(value), new_y_col_name] = np.nan\r\n   return df_param\r\n\r\n\r\napp = dash.Dash(__name__)\r\n\r\napp.layout = html.Div(id='container', children=[\r\n   dcc.DatePickerRange(\r\n       id='date-picker-range',\r\n       minimum_nights=0,\r\n       display_format='YYYY\/MM\/DD'\r\n   ),\r\n   dcc.Graph(id='scatter-graph'),\r\n])\r\n\r\n\r\n@app.callback(\r\n   Output('date-picker-range', 'start_date'),\r\n   Output('date-picker-range', 'end_date'),\r\n   Input('container', 'id')\r\n)\r\ndef update_date_picker(id):\r\n   df = pd.read_csv('csv\/app_sample.csv')\r\n   df = process_csv_variable(df)\r\n   x_col_name = df.columns[0]\r\n\r\n   init_start_date = df[x_col_name].min().strftime('%Y-%m-%d')\r\n   init_end_date = df[x_col_name].max().strftime('%Y-%m-%d')\r\n   return init_start_date, init_end_date\r\n\r\n\r\n@app.callback(\r\n   Output('scatter-graph', 'figure'),\r\n   Input('date-picker-range', 'start_date'),\r\n   Input('date-picker-range', 'end_date')\r\n)\r\ndef update_figure(start_date, end_date):\r\n   df = pd.read_csv('csv\/app_sample.csv')\r\n   df = process_csv_variable(df)\r\n   if start_date is not None and end_date is not None:\r\n       start_date = datetime.fromisoformat(start_date)\r\n       end_date = datetime.fromisoformat(end_date) + timedelta(days=1)\r\n       # get first columns name for x-axis\r\n       x_col_name = df.columns[0]\r\n       # get list column name except first column for y-axis\r\n       y_col_name_list = df.columns[1:]\r\n       filtered_df = df[(start_date &lt;= df[x_col_name]) &amp; (df[x_col_name] &lt;= end_date)]\r\n       scatter_fig = px.scatter(filtered_df, x=x_col_name, y=y_col_name_list)\r\n\r\n       return scatter_fig\r\n\r\n\r\nif __name__ == '__main__':\r\n   app.run_server(debug=True)\r\n<\/pre>\n<p>process_csv_variable\u95a2\u6570\u306fDataFrame\u3092\u53d7\u3051\u53d6\u308a\u3001\u5217\u540d\u304b\u3089config\u3092\u8aad\u307f\u53d6\u308aconfig\u306b\u3088\u308b\u30c7\u30fc\u30bf\u3092\u51e6\u7406\u3057\u3066\u304b\u3089DataFrame\u3092\u8fd4\u3057\u307e\u3059\u3002<br \/>\n\u4eca\u3001csv\/app_sample.csv\u30d5\u30a1\u30a4\u30eb\u3092\u8ffd\u52a0\u3057\u3066\u30c6\u30b9\u30c8\u3057\u307e\u3059\u3002<\/p>\n<pre>DateTime(yyyyMMdd HH:mm:ss.fff),DATA 1(minFilter=20;maxFilter=100),DATA 2(maxFilter=140),DATA 3,DATA 4,DATA 5\r\n20211219 101010.010,10,200,178,90,110\r\n20211219 111010.020,20,150,134,25,120\r\n20211219 121010.030,5,130,210,11,90\r\n20211219 131010.040,15,110,100,-97,80\r\n20211219 141010.050,60,150,143,-17,130\r\n20211219 151010.060,30,140,132,30,140\r\n20211219 161010.070,20,180,167,45,150\r\n20211219 171010.080,16,120,240,123,160\r\n20211219 181010.090,75,190,153,40,150\r\n20211219 191010.100,90,250,162,-10,170\r\n20211220 001010.000,68,142,156,1,180\r\n20211220 011010.010,40,110,134,65,130\r\n20211220 021010.020,50,140,214,149,190\r\n20211220 031010.030,60,150,169,-98,200\r\n20211220 041010.040,70,160,204,-173,190\r\n20211220 051010.050,80,170,164,-108,180\r\n20211220 061010.060,90,180,148,150,170\r\n20211220 071010.070,100,190,180,92,150\r\n20211220 081010.080,110,200,268,94,160\r\n20211220 091010.090,120,210,164,-139,140\r\n20211220 101010.100,130,220,254,-132,130\r\n20211221 001010.000,10,90,142,30,150\r\n20211221 011010.010,30,100,162,55,160\r\n20211221 021010.020,80,120,180,20,170\r\n20211221 031010.030,70,110,176,-10,110\r\n20211221 041010.040,50,130,194,-90,90\r\n20211221 051010.050,60,140,202,-120,80\r\n20211221 061010.060,90,150,164,100,70\r\n20211221 071010.070,120,160,197,132,60\r\n20211221 081010.080,110,170,186,40,50\r\n20211221 091010.090,130,210,182,-130,40\r\n20211221 101010.100,120,230,210,-100,30\r\n<\/pre>\n<p>\u30bf\u30fc\u30df\u30ca\u30eb\u3067\u306f<code>python app.py<\/code>\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3001<a href=\"http:\/\/127.0.0.1:8050\/\">http:\/\/127.0.0.1:8050\/<\/a>\u306b\u30a2\u30af\u30bb\u30b9\u3057\u3066\u7d50\u679c\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6380 size-full\" src=\"https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2021\/12\/31150435\/app_demo1.png\" alt=\"app demo 1\" width=\"1361\" height=\"493\" srcset=\"https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2021\/12\/31150435\/app_demo1.png 1361w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2021\/12\/31150435\/app_demo1-300x109.png 300w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2021\/12\/31150435\/app_demo1-1024x371.png 1024w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2021\/12\/31150435\/app_demo1-768x278.png 768w\" sizes=\"auto, (max-width: 1361px) 100vw, 1361px\" \/><\/p>\n<p>\u7d50\u679c\u3092\u78ba\u8a8d\u3057\u3084\u3059\u304f\u3059\u308b\u305f\u3081\u306b\u3001\u4ed6\u306e\u30c7\u30fc\u30bf\u3092\u975e\u8868\u793a\u306b\u3057DATA1\u306e\u307f\u3092\u8868\u793a\u3057\u307e\u3059\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6381 size-full\" src=\"https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2021\/12\/31150508\/app_demo2.png\" alt=\"app demo 2\" width=\"1366\" height=\"498\" srcset=\"https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2021\/12\/31150508\/app_demo2.png 1366w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2021\/12\/31150508\/app_demo2-300x109.png 300w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2021\/12\/31150508\/app_demo2-1024x373.png 1024w, https:\/\/s3-ap-southeast-1.amazonaws.com\/homepage-media\/wp-content\/uploads\/2021\/12\/31150508\/app_demo2-768x280.png 768w\" sizes=\"auto, (max-width: 1366px) 100vw, 1366px\" \/><\/p>\n<p>20\u3088\u308a\u5c0f\u3055\u3044\u5024\u53ca\u3073100\u3088\u308a\u5927\u304d\u3044\u5024\u306e\u30c7\u30fc\u30bf\u304c\u9664\u5916\u3055\u308c\u3066\u3044\u308b\u3053\u3068\u304c\u308f\u304b\u308a\u307e\u3059\u3002<\/p>\n<h1>\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9<\/h1>\n<p><a href=\"https:\/\/gitlab.com\/bwv-hp\/python-dash-sample\">https:\/\/gitlab.com\/bwv-hp\/python-dash-sample<\/a><\/p>\n<h1>\u53c2\u7167\u5143<\/h1>\n<p><a href=\"https:\/\/dash.plotly.com\/\">https:\/\/dash.plotly.com\/<\/a><\/p>\n<p><a href=\"https:\/\/pandas.pydata.org\/docs\/\">https:\/\/pandas.pydata.org\/docs\/<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>Dash \u3068\u306f Dash\u306fMIT\u30e9\u30a4\u30bb\u30f3\u30b9\u3067\u516c\u958b\u3055\u308c\u3066\u3044\u308b\u30aa\u30fc\u30d7\u30f3\u30bd\u30fc\u30b9\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u3067\u3059\u3002\u3053\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u306f\u3001Plotly.js\u3001R [&hellip;]<\/p>\n","protected":false},"author":26,"featured_media":6393,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false,"footnotes":""},"categories":[4,71],"tags":[99,100,101],"class_list":["post-6370","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news","category-it-tec","tag-python","tag-dash","tag-panda"],"_links":{"self":[{"href":"https:\/\/www.briswell-vn.com\/ja\/wp-json\/wp\/v2\/posts\/6370","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.briswell-vn.com\/ja\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.briswell-vn.com\/ja\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.briswell-vn.com\/ja\/wp-json\/wp\/v2\/users\/26"}],"replies":[{"embeddable":true,"href":"https:\/\/www.briswell-vn.com\/ja\/wp-json\/wp\/v2\/comments?post=6370"}],"version-history":[{"count":0,"href":"https:\/\/www.briswell-vn.com\/ja\/wp-json\/wp\/v2\/posts\/6370\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.briswell-vn.com\/ja\/wp-json\/wp\/v2\/media\/6393"}],"wp:attachment":[{"href":"https:\/\/www.briswell-vn.com\/ja\/wp-json\/wp\/v2\/media?parent=6370"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.briswell-vn.com\/ja\/wp-json\/wp\/v2\/categories?post=6370"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.briswell-vn.com\/ja\/wp-json\/wp\/v2\/tags?post=6370"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}