WPF LiveChart示例

前端頁面代碼

<TabItem Header="直方圖" >
                <wpf:CartesianChart Series="{Binding SeriesCollectionAnayColumn}" 
                                    LegendLocation="Right" >
                    <wpf:CartesianChart.AxisX>
                        <wpf:Axis Title="區間" Labels="{Binding LabelsColumn}"  Foreground="#FF8DEBF7"/>
                    </wpf:CartesianChart.AxisX>
                    <wpf:CartesianChart.AxisY>
                        <wpf:Axis Title="頻率"  LabelFormatter="{Binding YFormatterColumn}" Foreground="#FF8DEBF7"/>
                    </wpf:CartesianChart.AxisY>
                    <wpf:CartesianChart.DataTooltip>
                        <!--The Selection mode property should be done automatically in future versions-->
                        <wpf:DefaultTooltip SelectionMode="SharedXValues" Background="DarkSlateGray"/>
                    </wpf:CartesianChart.DataTooltip>
                </wpf:CartesianChart>



            </TabItem>
            <TabItem Header="波形圖">
                <wpf:CartesianChart Series="{Binding SeriesCollectionAnayLine}" 
                                    LegendLocation="Right" >
                    <wpf:CartesianChart.AxisX>
                        <wpf:Axis Title="時間" Labels="{Binding LabelsLine}"  Foreground="#FF8DEBF7"/>
                    </wpf:CartesianChart.AxisX>
                    <wpf:CartesianChart.AxisY>
                        <wpf:Axis Title="值"  LabelFormatter="{Binding YFormatterLine}" Foreground="#FF8DEBF7"/>
                    </wpf:CartesianChart.AxisY>
                    <wpf:CartesianChart.DataTooltip>
                        <!--The Selection mode property should be done automatically in future versions-->
                        <wpf:DefaultTooltip SelectionMode="SharedXValues" Background="DarkSlateGray"/>
                    </wpf:CartesianChart.DataTooltip>
                </wpf:CartesianChart>
            </TabItem>

ViewModel代碼

//定義頁面上綁定的數據源
 public SeriesCollection _seriesCollectionAnayColumn { get; set; }
        public SeriesCollection SeriesCollectionAnayColumn
        {
            get => _seriesCollectionAnayColumn;
            set
            {
                _seriesCollectionAnayColumn = value;
                RaisePropertyChanged();
            }
        }
        public string[] _labelsColumn { get; set; }
        public string[] LabelsColumn
        {
            get => _labelsColumn;
            set
            {
                _labelsColumn = value;
                RaisePropertyChanged();
            }
        }
        public Func<double, string> _yFormatterColumn { get; set; }
        public Func<double, string> YFormatterColumn
        {
            get => _yFormatterColumn;
            set
            {
                _yFormatterColumn = value;
                RaisePropertyChanged();
            }
        }


        public SeriesCollection _seriesCollectionAnayLine { get; set; }
        public SeriesCollection SeriesCollectionAnayLine
        {
            get => _seriesCollectionAnayLine;
            set
            {
                _seriesCollectionAnayLine = value;
                RaisePropertyChanged();
            }
        }
        public string[] _labelsLine { get; set; }
        public string[] LabelsLine
        {
            get => _labelsLine;
            set
            {
                _labelsLine = value;
                RaisePropertyChanged();
            }
        }
        public Func<double, string> _yFormatterLine { get; set; }
        public Func<double, string> YFormatterLine
        {
            get => _yFormatterLine;
            set
            {
                _yFormatterLine = value;
                RaisePropertyChanged();
            }
        }



//為頁面綁定的數據源賦值
   //折線圖
                        SeriesCollectionAnayLine = new SeriesCollection();
                        LabelsLine =data.TrainTime;
                    YFormatterLine = value => value.ToString("f4");
 SeriesCollectionAnayLine.Add(new LineSeries
                        {
                            Title = data.TestData[0].DataType,
                            Values = new ChartValues<float>(YAxis),
                            LineSmoothness = 0
                        });


 //直方圖
                            SeriesCollectionAnayColumn = new SeriesCollection();
                            LabelsColumn = columuResult.XAxis;
                            YFormatterColumn = value => value.ToString("f3");
                            SeriesCollectionAnayColumn.Add(new ColumnSeries
                            {
                                Title = "頻率",
                                Values = new ChartValues<float>(columuResult.YAxis)
                            });