C3 example

 1. D3 format

https://observablehq.com/@d3/d3-format

https://stackoverflow.com/questions/38639357/c3-js-timeseries-graph-with-percentage-y-axis

https://c3js.org/gettingstarted.html

1-5 c3:

https://hackmd.io/UEzl5wVER7-jVRZj7jqYpQ

https://hackmd.io/@ericacadu/H1k5d1Xew

2,  c3. example

https://a498390344.medium.com/d3-js-c3-js%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98-56ca4e2c88

https://hsuchihting.github.io/javascript/20200715/3292510004/

var chart = c3.generate({
bindto: "#chart",
data: {
columns: [
["data1", 30, 200, 100, 400, 150, 250],
["data2", 50, 20, 10, 40, 15, 25]
],
//新增 data2 的數據在右邊
axes: {
data2: "y2"
},
//自訂圖表類型
types: {
data1: "line", //指定 data1 的圖表類型
data2: "bar" // 指定 data2 的圖表類型
},
//自訂 data 顏色
colors: {
data1: "#03A9F4",
data2: "#76FF03"
}
},
legend: {
show: true //是否顯示項目
},
//客製左邊數據
axis: {
//客製 X 軸內容
x: {
type: "category",
categories: [2000, 2001, 2002, 2003, 2004, 2005],
label: {
text: "X軸名稱"
}
},
//客製 Y 軸內容
y: {
ticket:{
format: d3.format('s')
}
},
//客製右側 (data2) Y2 軸內容
y2: {
show: true,
label: {
text: "右邊Y軸名稱",
position: "outer-middle" //名稱位置
}
}
}
});

3. flask

https://stackoverflow.com/questions/51669102/how-to-pass-data-to-html-page-using-flask

https://flask.palletsprojects.com/en/0.12.x/tutorial/templates/

https://yanwei-liu.medium.com/python%E7%B6%B2%E9%A0%81%E8%A8%AD%E8%A8%88-flask%E4%BD%BF%E7%94%A8%E7%AD%86%E8%A8%98-%E4%BA%8C-89549f4986de

https://devs.tw/post/448