服務宗旨

網智數位主要提供套裝及客製化的軟體系統解決方案,專為客戶量身訂做客製化的軟體,達成客製化、智慧化及網路化的管理功能。

我們的成立宗旨就是要以最猛的IT技術讓這個世界更Smart,在我們貫徹我們裡想的同時,我們希望可以把我們所開發的系統帶給台灣的中小企業,除了要推薦好的東西之外,我們也希望做點改變,所以我們的第一目標就是要使用最好用的系統再加上您寶貴的創意,不僅僅可以節省你大量的荷包,還可以有一個像樣的網站。我們可以幫你做的有

企業管理
  • 策略管理
  • 目標管理
  • 行銷管理
  • 財會管理
  • ERP導入
  • 企業流程自訂
資訊管理
  • 網站架設
  • 虛擬化/雲端架設
  • 主機代管
  • 私有雲建制與導入
軟體開發
  • UML設計
  • 版本控管
  • 企業軟體開發
  • APP開發
  • 網頁設計
資訊安全
  • 網頁弱點掃描
  • 主機弱點掃描
  • 木馬檢測
  • 資安鑑識
  • 設計網路架構
  • 資安監控
行銷
  • 關鍵字SEO
  • 社群網路行銷
  • 部落格行銷
  • FaceBook 粉絲團
其他
  • 協助企業申請Google Email
好玩工具開發

講出你的創意吧!沒有甚麼是資訊辦不到的

2016年11月11日 星期五

繪圖程式-折線圖、區域圖 實作一(軟體設計、軟體開發、程式開發)

        這半年來一直不斷被客戶要求開發相關繪圖功能的程式,礙於現在很多程式開發人員,已經越來越多人只會資料庫的CRUD,對於繪圖程式撰寫掌握度不是很好,甚至基本觀念也沒有,所以大多數程式開發人員都是去找相關的Chart套件,也很少有人示範在 Windows 10 APP 如何開發相關繪圖程式功能(很抱歉目前Windows 10 似乎沒有提供相關繪圖控制箱可以直接使用,所以要真的自己寫繪圖功能),所以我這篇就來教導如何在 Windows Universal APP 開發一個 折線圖功能,折線圖在軟體應用上面常用於股票分析、統計分析、銷售分析、趨勢走向等圖表展現。

(折線圖)
r-data-exploration-and-visualization-line-plot-1


(區域圖)
886d1a27-3744-417b-a3e5-e9b9878e5760



折線圖原理其實就是在一個二維的空間(平面)中,利用多個 【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個按鈕,分別作為繪製 折線圖跟區域圖,前端界面如下

image


//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);
      }




上述程式撰寫完畢後,就可以直接點選【折線圖繪製】按鈕,畫面馬上呈現折線圖,如下執行結果

image
image







網智數位-軟體開發(軟件開發)
針對各特殊產業都可以量身定做符合貴公司的需求,別人無法克服的就是我們的挑戰
業務合作、軟體委外開發
業務窗口:allen@netqna.com
聯繫電話:0920-883-870
skype: netqna
line:netqna
微信:netqna
黃先生 Allen






0 意見:

張貼留言

如您對本文有任何建議或意見,歡迎您留下您寶貴的意見!