這半年來一直不斷被客戶要求開發相關繪圖功能的程式，礙於現在很多程式開發人員，已經越來越多人只會資料庫的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
網智數位-軟體開發 程式設計 系統分析 客製化軟體 