---
title: "#30DaysOfStreamlit Day9 st.line_chart"
description: "この記事では、#30DaysOfStreamlitの内容の紹介を行います。\nst.line_chart\n`st.line_chart`は折れ線グラフを描画します。\n`st.line_chart`は`st.altair_chart`のsyntax-sugerであるため、`st.line_chart`でデータの定"
---

[AIDXナレッジ - INSIGHT LAB](https://knowledge.insight-lab.co.jp/aidx)

# [#30DaysOfStreamlit Day9 st.line\_chart](https://knowledge.insight-lab.co.jp/aidx/30daysofstreamlit-day9-st.line_chart)

 作成者: [Budo Ogimoto](https://knowledge.insight-lab.co.jp/aidx/author/budo)｜2023年12月19日

## はじめに

この記事では、#30DaysOfStreamlitの内容の紹介を行います。   
#30DaysOfStreamlitについては[コチラの記事](https://knowledge.insight-lab.co.jp/aidx/30daysofstreamlitをやってみた)を参照してください。

## st.line\_chart

`st.line_chart`は折れ線グラフを描画します。  
`st.line_chart`は`st.altair_chart`のsyntax-sugerであるため、`st.line_chart`でデータの定義を推測できない場合は、`st.altair_chart`を利用すると良いそうです。

## 構築する目標

折れ線グラフを表示するシンプルなアプリケーションを構築します。

以下の要件を含みます。

1. ランダムに生成された数値を利用してPandas DataFrameを作成します
2. `st.line_chart()`を利用して折れ線グラフの作成・表示を行います

## アプリケーションの構築

実際にアプリケーションを構築します。 コードは以下の通りです。

## コードの解説

まずは必要なライブラリーをインポートします。

続いて、ヘッダーテキストを設定します。

numpyのrandom.randnを使い正規分布に従う20ステップのデータを3系統出力します。 この際に、各系統の種類をカラムで表現し、データの時系列をインデックスで表現します。

データのイメージとしては以下の通りです。

| index | a | b | c |
| --- | --- | --- | --- |
| 0 | 1.4 | -1.3 | 0.6 |
| 1 | 0.5 | 1.7 | -2.1 |
| : | : | : | : |
| 19 | 2.1 | 3.0 | 1.1 |

最後に可視化したい対象のデータフレームをst.line\_chart に入力してグラフの描画と表示を行います。

出力は以下の通りです。

[完全な記事を表示](https://knowledge.insight-lab.co.jp/aidx/30daysofstreamlit-day9-st.line_chart)

```json
{
  "@context" : "http://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Budo Ogimoto"
  },
  "dateModified" : "2023-12-19T03:11:23.107Z",
  "datePublished" : "2023-12-19T03:11:22Z",
  "headline" : "#30DaysOfStreamlit Day9 st.line_chart",
  "image" : {
    "@type" : "ImageObject",
    "height" : 1531,
    "url" : "https://download.insight-lab.co.jp/hubfs/30days_logo.png",
    "width" : 3121
  },
  "mainEntityOfPage" : "https://knowledge.insight-lab.co.jp/aidx/30daysofstreamlit-day9-st.line_chart",
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "height" : 60,
      "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png",
      "width" : 60
    },
    "name" : "AIDXナレッジ - INSIGHT LAB"
  }
}
```