2021.05.12前回の記事「【Plotly】データベースからデータを読み込んで可視化する」までPlotlyでPlotlyExpressを用いたグラフを描画してきました。PlotlyExpressを用いると、それぞれの軸のデータを渡して一気にグラフを描くことができるという利点があります。Expressだと折れ線とマークを同時に表示できないという制約があることがわかりました。Objectsを用いてFigureWidgetを生成します。PlotlyExpressで生成するときのように描画するグラフのデータをまとめて渡すことはできませんが、描画する一つ一つのグラフごとにトレースすることでPlotlyExpressよりも細かい制御ができるようになっています。Objectsを用いて折れ線とマークを同時に表示しつつ、データのない部分については欠損として折れ線グラフを描画しないようにするにはどのような形でデータを渡せばよいのかをみてゆきます。新しい方法を試す際には、一つ一つ動作を確認しながらすすめたほうが、近道になります。今回もPlotlyのサイトにあるサンプルを元にして変更を加え、データベースから読み込んだデータを流し込む前までを作成してゆきます。Objectsを用いたグラフ描画を固めます。次に描画をおこなうのに最適なデータ構造を決定します。最後に実際にグラフを描いてみます。データベースからの読み込みは次回とします。Gaps」のサンプルを修正します。サンプルは以下のようになっています。name='Gaps',))fig.show()上記をtest.pyというファイル名で保存してください。保存したら実行します。test.pyPlotlyがインストールされていたら以下のようにグラフが表示されます。Plotlyのインストールがまだの場合には「【Plotly】データを見える化する」を元にPlotlyをインストールしてください。縦軸、横軸、グラフのタイトル、凡例を変更し、x軸を日付形式にします。y軸に関しては反転させます。青いグラフに関してもGapを入れるようにします。記事2',))fig.update_yaxes(autorange='reversed')fig.update_xaxes(tickformat="%Y-%m-%d")fig.update_layout(title="検索キーワード",xaxis_title="日付",yaxis_title="順位")fig.show()早速実行してみます。順位が0.5刻みなのが気になります。日付は1日になっていますが、Windowを拡大すると日付+時刻刻みになりました。軸の刻みを縦軸は1に横軸は1日刻みに変更します。最後から4行目と最後から3行目を以下のように変更します。Day')再度実行すると軸の刻みが以下のように固定されました。図を拡大しても横軸は1日刻みになっていました。レイアウトは思う通りになったため、データ構造を修正してゆきます。順位ごとにループを回してグラフを出力できるようにデータ構造を修正します。fig.show()これで以下のようにグラフが2つ表示されました。Ojbectsで描画しました。複数のグラフやグラフのラインを描画するために必要なデータ構造を考え、ループを回すことでグラフを複数描くことができました。次回はデータベースにアクセスしてグラフを描画します。Objectsに投入するデータ構造を考えた上でSQLを組み立ててゆきます。articleコメントはまだありません。