這半年來一直不斷被客戶要求開發相關繪圖功能的程式,礙於現在很多程式開發人員,已經越來越多人只會資料庫的CRUD,對於繪圖程式撰寫掌握度不是很好,甚至基本觀念也沒有,所以大多數程式開發人員都是去找相關的Chart套件,也很少有人示範在 Windows 10 APP 如何開發相關繪圖程式功能(很抱歉目前Windows 10 似乎沒有提供相關繪圖控制箱可以直接使用,所以要真的自己寫繪圖功能),所以我這篇就來教導如何在 Windows Universal APP 開發一個 折線圖功能,折線圖在軟體應用上面常用於股票分析、統計分析、銷售分析、趨勢走向等圖表展現。
(折線圖)
(區域圖)
折線圖原理其實就是在一個二維的空間(平面)中,利用多個 【X,Y】坐標點透過直線連結起來,所形成的趨勢圖形,通常 X 軸代表一個某種類別例如月份、年份、型別等,而Y軸代表某類別的實際值,例如業績、銷售量、收入、人數等。在折線圖中,X軸都呈現等量(距)的增加。
現在我們知道了簡單的折線圖原理後,在Windows 10 (UWP)平台開發上,是必須使用 Polyline 繪圖技術來進行開發,可以在界面直接選告 XAML 語法,例如底下Code:
<Polyline Stroke=“Blue” StrokThickness="3”Points=”5,10 20,30 25,40 100,120”/>
其中最重要的來自于 Points 屬性 ,5,10 =》代表一個點 [5,10] =>X=5,Y=10
但通常在開發繪圖功能時,都是動態繪圖產生,所以在這邊我也示範如何完全在背後使用程式開發一個折線圖功能,我在界面上我簡單的設計2個按鈕,分別作為繪製 折線圖跟區域圖,前端界面如下
//XAML Code
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal">
<Button Content="折線圖繪製" Click="DrawChart_1" Margin="12" Background="AliceBlue"></Button>
<Button Content="區域圖繪製" Click="DrawChart_2" Margin="12" Background="Wheat"></Button>
</StackPanel>
<Grid x:Name="gdChartCanvas" Grid.Row="1" Height="auto" HorizontalAlignment="Center" VerticalAlignment="Center">
</Grid>
</Grid>
在後端的程式碼,分別設計了 GetAllPoints()方法、與對應的 DrawChart_1 、DrawChart_2 事件方法
/// <summary>
/// 取得所有折線圖、區域圖的 Y值清單
/// </summary>
/// <param name="yValues">Y值清單</param>
/// <param name="perWidth">X等距寬度</param>
/// <param name="yStartValue">Y起始值</param>
/// <returns></returns>
private PointCollection GetAllPoints(List<double> yValues, double perWidth, double yStartValue)
{
PointCollection points = new PointCollection();
double x = 0;
foreach (double yVal in yValues)
{
double y;
//判斷 Y 值是否小於 Y坐標起始值,因為畫布是從 100 開始
if (yVal < yStartValue)
{
y = 100;
}
else
{
//可以套用自己的公式來設定Y值
//y = Math.Floor((500 - (yVal * 200) / 300));
y = yVal;
}
Point point = new Point(x, y);
points.Add(point);
x += perWidth;
}
return points;
}
/// <summary>
/// 繪製折線圖
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void DrawChart_1(object sender, RoutedEventArgs e)
{
//清除畫布
this.gdChartCanvas.Children.Clear();
//Y值清單
List<double> datas = new List<double> { 185, 130, 230, 140, 200, 60, 170, 150, 190, 150, 110, 220, 130, 190, 150 };
//取得套用公式的Y轉變值
PointCollection pointCollection = GetAllPoints(datas, 45, 100);
Polyline polyline = new Polyline { Points = pointCollection, Stroke = new SolidColorBrush(Colors.Red) };
this.gdChartCanvas.Children.Add(polyline);
}
上述程式撰寫完畢後,就可以直接點選【折線圖繪製】按鈕,畫面馬上呈現折線圖,如下執行結果
網智數位-軟體開發(軟件開發)
針對各特殊產業都可以量身定做符合貴公司的需求,別人無法克服的就是我們的挑戰
業務合作、軟體委外開發
業務窗口:allen@netqna.com
聯繫電話:0920-883-870
skype: netqna
line:netqna
微信:netqna
黃先生 Allen
沒有留言:
張貼留言
如您對本文有任何建議或意見,歡迎您留下您寶貴的意見!