2019年11月10日(日)

ミニ折れ線グラフ

• 0
• 0
• 2
• 6

Result

See the Pen Micrographs by kachibito
(@kachibito) on CodePen.

jQueryを使ったミニ折れ線グラフです。コードは長いのでCodepenでご参照ください

セッティングは以下のようにすればいいだけ

$(".micro-graph").graphiq({ data: coffees, fluidParent: ".little-container", height: 36.01, xLineCount: 0, lineWeight: 1.5, dotRadius: 4, yLines: false, xLines: true, dots: false, fillOpacity: 0.5, fill: false, colorUnits: "#c3ecf7" });

楽でいいですね

html

先ほどのセッティングで指定したclassを持った空要素を用意すればOK

via

Micrographs