Python Matplotlib 簡單繪制圖表教學 ( 折線圖 )

Python 的 Matplotlib 的可用來繪製簡單的折線圖,例如 N 路線圖 或是 數據圖

只要使用 plt.plot ,給 X, Y 值就可以畫出圖表例,例如

這邊說明一下, plt.plot 有不同的參數可以做出不同的線或是點

plt.plot(x, y, 'o') # 只有點
plt.plot(x, y) # 只有線( 預設 )
plt.plot(x, y, '-o') # 點和線
plt.plot(x, y, '--o') # 點和虛線

Continue reading “Python Matplotlib 簡單繪制圖表教學 ( 折線圖 )”

VueJS 簡單教學: v-for 與選單產生

VueJS 中的 v-for 的 List Rendering 是一個強大的功能,可以方便將 JSON 資料轉換成 html 內容。

例如以下資料是由 API 或其他 JS 產生的,要用來製作選單 ( 用 Javascript 來動態產生選單 )

items: [
  {name: "選單1", href: "https://tree.rocks/"},
  {name: "選單2", href: "https://www.apple.com/"},
  {name: "選單3", href: "https://github.com/"}
]

 

那麼可以放入 Vue JS 中

new Vue( {
  el: '#tree',
  data: {
  	items: [
    	{name: "選單1", href: "https://tree.rocks/"},
      {name: "選單2", href: "https://www.apple.com/"},
      {name: "選單3", href: "https://github.com/"}
    ]
  }
} );

在加點 html

<div id="tree">
  <div class="menu_item" v-for="item in items" >
    <a v-bind:href="item.href" >{{ item.name }}</a>
  </div>
</div>

 

就可以生成網頁了 ( 如下圖 )

 

範例網頁:
https://jsfiddle.net/Seachaos/w8ygx1dy/