c chart控制項新增邊界值線條以及擴充套件性功能

最近一致在開發能源平台，平台中很多能耗資料都是通過使用微軟的chart控制項進行圖形呈現的。考慮到要給使用者更為直觀的呈現效果，需要對原有控制項的功能進行擴充套件。微軟chart控制項沒有第三方樣chart樣式炫酷，但是勝在可定製性強，中文手冊詳細，很多效果能夠自己寫出來。

主要實現功能：1.最大值，最小值，平均值展示 2.滑鼠移動到資料點繪製豎線，用tooltip的方式展示資料

最終呈現效果如圖：

解決方案：

（1）最大值，最小值，平均值呈現

之前在網上找了好久都沒有想要的效果，第三方控制項往往都能直接設定。最開始我的解決方法是在chartarea中新增單獨的series展示最值，但是呈現效果不佳：

在看了微軟的技術手冊後，發現可以在chartarea中新增stripline實現。以插入最大值線條為例，**如下：

//最大線條
double max =ammeter.max();
stripline stripmax = newstripline();
stripmax.text = string.format("最大：", max);//展示文字
stripmax.backcolor = color.fromargb(208, 109, 106);//背景色
stripmax.interval = 0;//間隔
stripmax.intervaloffset = max;//偏移量
stripmax.stripwidth = 0.001;//線寬
stripmax.forecolor = color.white;//前景色
stripmax.textalignment = stringalignment.near;//文字對齊方式
chartinfo.chartareas["ammeter"].axisy.striplines.add(stripmax);//新增到chartareas中

（2）實現滑鼠移動到資料點繪製豎線，用tooltip的方式展示資料

chart中可以對畫圖區域使用hittest進行資料點檢測，之前的方案是在滑鼠移動的過程中對當前滑鼠的座標區域(x為當前座標，y為畫圖區域的高 )進行資料檢測，移動的過程中繪製跟隨滑鼠的線條。實現後發現效果並不是很好，hittest在資料點周圍的series都會判定為資料點，所以線條一直在繪製，而想要的效果滑鼠移動的過程中僅在資料點時才繪製豎線。

要在資料點位置繪製線條需要獲得資料點的相對座標，網上一直沒有找到解決辦法。起初通過x，y軸的偏移量，0點的座標，繪圖區域的座標可以實現相對座標的獲取，但是發現這樣有時計算會有很大的偏差。同樣通過查詢技術手冊後，發現微軟給了獲取x，y軸相對座標的方法。

point lastpoint = new point();//
上次點的座標
tooltip tp = new tooltip();//
tooltip展示條
//繪製豎線座標
point p1 = new point(0, 0
); point p2 = new point(0, 0
); 
//////
滑鼠移動事件
/// ///
///private
void chartinfo_mousemove(object
sender, mouseeventargs e)
int i =result.pointindex;
datapoint dp =result.series.points[i];
dp.markerstyle = markerstyle.star4;//
捕獲到資料點的樣式
dp.markercolor =color.orange;
dp.markersize = 15
; 
//獲取資料點的相對座標
p1 = new point((int)chartinfo.chartareas["
ammeter
"].axisx.valuetopixelposition(dp.xvalue), 0
); p2 = new point((int)chartinfo.chartareas["
ammeter
"].axisx.valuetopixelposition(dp.xvalue), chartinfo.size.height);
seriesinfo = string.format("
", result.series.legendtext, datetime.fromoadate(dp.xvalue), dp.yvalues[0
]); 
break
; }
}tp.autopopdelay = 5000;//
展示tooltip
tp.showalways = false
; tp.isballoon = true
; tp.settooltip(chartinfo, seriesinfo);
}lastpoint = e.location;//
記錄本次位置
g.drawline(pen, p1, p2);//
繪製豎線
}

寫在最後

微軟技術手冊真香

c chart控制項新增邊界值線條以及擴充套件性功能

C Chart控制項

C Chart控制項的安裝

C CHART控制項的相關操作備忘

c chart控制項新增邊界值線條以及擴充套件性功能

C Chart控制項

C Chart控制項的安裝

C CHART控制項的相關操作備忘

相關推薦