之前第一篇所說的東西都是我去年做的~算是總結了我去年的canvas成果吧
這個平衡圖控件是我近2天做的 是用canvas繪制的
~\(≧▽≦)/~啦啦啦 很有成就感呢 里面的一筆一線都是我自己畫的 沒有借助第三方控件哦
也許對某些大俠來講這個根本不值一提 可是我真的很嗨皮 誰叫我是一只小蝦米呢
貼出來讓大家幫幫我看還有什么地方可以改進的
其中如下信息是可以配置的
"colors":['yellow','cyan'] //根據項目需求只配了2個色塊
"ymax":10
"ycount":5
"numyticks":10
'xlabels':["s1","s2","s12","s23","s3","s4","s5","s7","s9"]
這個是我們根據項目需要所制定的平衡圖 從所配置的信息來看 可擴展性不是很強#O__O"…~~~
不過以后類似這種柱形圖應當不會難倒我了
第一步 畫XY軸：
Y軸很好畫~先畫Y軸的豎線然后再畫橫線 Y的長度/numyticks 平分 用canvas的moveTO及lineTo 就可以了哈
X軸是矩形漸變的~這個也不難
第二步 畫bars：
畫bars要注意最大值 最小值還有平均值 這里設計到算法 就是每個bars在canvas時有多高
算法是很重要的 完全可以決定了你控件的水平度 好的算法可以使你的控件看上去簡潔 功能又強大 反之就很煩鎖了 別人看了心里也會毛毛慥慥的
記得每個bars的時要減去X軸的一半高
最后一步 畫標簽：
這個也很簡單 奇怪啊~有些問題沒有相同之前真是難 難於上青天 只要突然靈光一現就覺得 啊 so easy
我覺得畫這種圖形就是要計算相應的點坐標就O了
這個控件有什么可擴展性了？