FlexChart for UWP
手順 1：アプリケーションへの FlexChart の追加
FlexChart > クイックスタート > 手順 1：アプリケーションへの FlexChart の追加

この手順では、新しい Visual Studio アプリケーションを作成し、適切な参照をプロジェクトに追加します。さらに、FlexChart コントロールを作成するための XAML マークアップを追加します。

  1. 新しい ユニバーサル Windows アプリケーションを作成します。
    1. ［ファイル］→［新規作成］→［プロジェクト］を選択します。［新しいプロジェクト］ダイアログボックスが開きます。
    2. ［テンプレート］→［Visual C#］→［Windows］→［ユニバーサル］を選択します。テンプレートリストで、［空のアプリ（ユニバーサル Windows）］を選択します。
    3. アプリケーションに名前を付け、［OK］をクリックします。新しいアプリケーションが作成されました。
  2. MainPage.xaml ファイルを開き、FlexChart コントロールをドラッグアンドドロップします。 次の参照がプロジェクトに追加されます。
    • C1.UWP.dll
    • C1.UWP.DX.dll
    • C1.UWP.FlexChart.dll
    参照が追加されない場合は、手動で追加してください。それには ［参照］ フォルダを ソリューションエクスプローラー で右クリックし、［追加］→［新しい参照］を選択します。

    次のように、必要な名前空間とコントロールマークアップが MainPage.xaml に追加されます。

    XAML
    コードのコピー 
    <Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Chart="using:C1.Xaml.Chart" xmlns:Xaml="using:C1.Xaml" xmlns:Foundation="using:Windows.Foundation"
    x:Class="App1.MainPage"
    mc:Ignorable="d">
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Chart:C1FlexChart x:Name="flexChart" HorizontalAlignment="Left" Height="300" VerticalAlignment="Top" Width="300" Xaml:C1NagScreen.Nag="True">
   <Chart:Series Binding="Y" BindingX="X" SeriesName="系列1">
   <Chart:Series.ItemsSource>
  <PointCollection>
  <Foundation:Point>1,8</Foundation:Point>
  <Foundation:Point>2,12</Foundation:Point>
  <Foundation:Point>3,10</Foundation:Point>
  <Foundation:Point>4,12</Foundation:Point>
  <Foundation:Point>5,15</Foundation:Point>
  </PointCollection>
   </Chart:Series.ItemsSource>
   </Chart:Series>
   <Chart:Series Binding="Y" BindingX="X" SeriesName="系列2">
   <Chart:Series.ItemsSource>
  <PointCollection>
  <Foundation:Point>1,10</Foundation:Point>
  <Foundation:Point>2,16</Foundation:Point>
  <Foundation:Point>3,17</Foundation:Point>
  <Foundation:Point>4,15</Foundation:Point>
  <Foundation:Point>5,23</Foundation:Point>
  </PointCollection>
   </Chart:Series.ItemsSource>
   </Chart:Series>
   <Chart:Series Binding="Y" BindingX="X" SeriesName="系列3">
   <Chart:Series.ItemsSource>
  <PointCollection>
  <Foundation:Point>1,16</Foundation:Point>
  <Foundation:Point>2,19</Foundation:Point>
  <Foundation:Point>3,15</Foundation:Point>
  <Foundation:Point>4,22</Foundation:Point>
  <Foundation:Point>5,18</Foundation:Point>
  </PointCollection>
   </Chart:Series.ItemsSource>
   </Chart:Series>
    </Chart:C1FlexChart>
    </Grid>
</Page>
  3. アプリケーションを実行します。FlexChart は次のように表示されます。

 

 

Copyright © MESCIUS, Inc. All rights reserved.