【PyScript】Matplotlibを使ってグラフを作ってみた

投稿日 2024年9月30日
著者ひがし
カテゴリー Python

head内には以下読み込みの記述を入れる。

<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css">
<script defer src="https://pyscript.net/latest/pyscript.js"></script>

HTML内の呼び出したいところに、以下を記述。

<div id="py-data_hogeHoge"></div>
<py-config type="json">
  {
    "packages": ["numpy", "matplotlib"]
  }
</py-config>
<py-script>
  import numpy as np
  import matplotlib.pyplot as plt
  
  outer_weight = np.array([1, 3, 1, 2, 4])
  outer_label = ["Apple", "Banana", "Ice", "Strawberry", "TABETYAU\nMOGUMOGU"]
  outer_color = ["red", "gold", "cyan", "magenta", "gray"]

  inner_weight = np.array([])
  inner_weight_arr = [
    [.5, .2, .3],
    [.8, .2],
    [1],
    [1],
    [.1, .9]
  ]
  inner_label = []
  inner_label_arr = [
    ["", "KUSATTERU", "Delicious"],
    ["SUBERU\nTalk", "SUBERANAI\nTalk"],
    ["ORE WO Ice"],
    [""],
    ["Diet\nTYOTTODEKIRU", "KANZENNI\nYASETA"]
  ]
  inner_color = []
  inner_color_arr = [
    ["darkgray", "darkgreen", "gold"],
    ["red", "blue"],
    ["firebrick"],
    ["lime"],
    ["firebrick", "#000"]
  ]

  for o_weight, arr_set in zip(outer_weight, inner_weight_arr):
    for arr in arr_set:
      inner_weight = np.append(inner_weight, o_weight*arr)

  for o_label, arr_set in zip(outer_label, inner_label_arr):
    for arr in arr_set:
      inner_label.append(arr)

  for o_color, arr_set in zip(outer_color, inner_color_arr):
    for arr in arr_set:
      inner_color.append(arr)


  radius = 1.5
  width_inner = .6
  width_outer = .4

  inner_wedge = {
    'width' : width_inner,
    'edgecolor' : 'white',
    'linewidth': 1
  }
  inner_text = {
    'color' : 'white',
    'weight': 'bold',
    'ha': 'center',
    'va': 'center'
  }

  outer_wedge = {
    'width' : width_outer,
    'edgecolor' : 'white',
    'linewidth': 1
  }
  outer_text = {
    'color' : 'white',
    'weight': 'bold',
    'ha': 'center',
    'va': 'center'
  }

  fig, ax = plt.subplots(figsize=(8.0, 8.0))
  ax.pie(inner_weight, colors=inner_color, labels=inner_label, counterclock=False, startangle=90, radius=radius-width_outer, wedgeprops=inner_wedge, textprops=inner_text, labeldistance=0.74, rotatelabels=True)
  ax.pie(outer_weight, colors=outer_color, labels=outer_label, counterclock=False, startangle=90, radius=radius, wedgeprops=outer_wedge, textprops=outer_text, labeldistance=.87)
  display(fig, target="py-data_hogeHoge")
</py-script>

ページを表示すると、以下のような画像が出力される。