碼上快樂

相關內容    簡體    繁體

LiveCharts.Wpf 的使用

本文轉載自   查看原文   2021-08-18 18:44   178    .NET/ .NET Core

LiveCharts.Wpf 的使用

首先，隨便創建一個 WPF 項目，然后使用 NuGet 安裝 LiveCharts.Wpf

在 XAML 中導入命名空間

xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"

基本框架

<lvc:CartesianChart>
    <!-- X 軸 -->
    <lvc:CartesianChart.AxisX>
        <lvc:Axis Title="" ShowLabels="" Labels="" LabelsRotation="">
            <lvc:Axis.Separator>
                <lvc:Separator Step=""/>
            </lvc:Axis.Separator>
        </lvc:Axis>
    </lvc:CartesianChart.AxisX>
    
    <!-- Y 軸 -->
    <lvc:CartesianChart.AxisY>
        <lvc:Axis Title="" MinValue="" MaxValue="" ShowLabels="" Labels="" LabelsRotation="">
            <lvc:Axis.Separator>
                <lvc:Separator Step=""/>
            </lvc:Axis.Separator>
        </lvc:Axis>    
    </lvc:CartesianChart.AxisY>

    <!-- 圖表類型 -->
    <lvc:CartesianChart.Series>
        <lvc:xxxSeries DataLabels="" Stroke="" Values="">
            <!-- 填充顏色，可以使用漸變色 -->
            <lvc:xxxSeries.Fill>
                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                    <GradientStop Color="" Offset="0"/>
                    <GradientStop Color="" Offset="1"/>
                </LinearGradientBrush>
            </lvc:xxxSeries.Fill>
        </lvc:xxxSeries>
    </lvc:CartesianChart.Series>
    
    <!-- 圖例中的圓點尺寸，圖例默認需要鼠標瞄到圖標才顯示，可以用 StackPanel 手動設置圖例樣式，這樣就可以顯示在圖表旁邊了-->
    <lvc:CartesianChart.ChartLegend>
        <lvc:DefaultLegend BulletSize=""/>
    </lvc:CartesianChart.ChartLegend>
</lvc:CartesianChart>

lvc:Axis：

  • MinValue和MaxValue：設置圖表顯示的數據范圍，可以不設置，可以靠 Step 和坐標系數的個數決定
  • ShowLabels和Labels：是否顯示 X 或 Y 軸的系數，Labels 就是坐標系數
  • LabelsRotation：是坐標軸上系數的旋轉角度
  • Title：坐標軸的標題

lvc:Axis.Separator：

  • lvc:Separator Step=""：這個就是設置設置兩個坐標系數之間的數據差距
  • lvc:Separator StrokeDashArray=""：分割線虛線間隔，一般不設置

lvc:CartesianChart.Series：

  • DataLabels：是否在坐標上顯示具體數據
  • LabelsPosition：設置DataLabels顯示的位置，一般不用寫，也不一定有這個屬性
  • Values：數據的集合

柱狀圖

柱狀圖的類型是 ColumnSeries

<lvc:CartesianChart Margin="10" FontWeight="Bold" FontSize="16">
    <lvc:CartesianChart.AxisX>
        <lvc:Axis Title="X軸" ShowLabels="True" Labels="1,2,3,4,5" LabelsRotation="0">
            <lvc:Axis.Separator>
                <lvc:Separator Step="1"/>
            </lvc:Axis.Separator>
        </lvc:Axis>
    </lvc:CartesianChart.AxisX>
    <lvc:CartesianChart.AxisY>
        <lvc:Axis Title="Y軸" MinValue="0" MaxValue="5" ShowLabels="True" Labels="0,1,2,3,4,5" LabelsRotation="0">
            <lvc:Axis.Separator>
                <lvc:Separator Step="1"/>
            </lvc:Axis.Separator>
        </lvc:Axis>
    </lvc:CartesianChart.AxisY>
    <lvc:CartesianChart.Series>
        <lvc:ColumnSeries DataLabels="True" Stroke="Red" Values="2,3,1,5,4">
            <lvc:ColumnSeries.Fill>
                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                    <GradientStop Color="Orange" Offset="0"/>
                    <GradientStop Color="White" Offset="1"/>
                </LinearGradientBrush>
            </lvc:ColumnSeries.Fill>
        </lvc:ColumnSeries>
    </lvc:CartesianChart.Series>
</lvc:CartesianChart>

效果圖

折線圖

折線圖的類型是LineSeries

<lvc:CartesianChart Margin="10" FontWeight="Bold" FontSize="16">
    <lvc:CartesianChart.AxisX>
        <lvc:Axis Title="X軸" ShowLabels="True" Labels="1,2,3,4,5" LabelsRotation="0">
            <lvc:Axis.Separator>
                <lvc:Separator Step="1"/>
            </lvc:Axis.Separator>
        </lvc:Axis>
    </lvc:CartesianChart.AxisX>
    <lvc:CartesianChart.AxisY>
        <lvc:Axis Title="Y軸" MinValue="0" MaxValue="5" ShowLabels="True" Labels="0,1,2,3,4,5" LabelsRotation="0">
            <lvc:Axis.Separator>
                <lvc:Separator Step="1"/>
            </lvc:Axis.Separator>
        </lvc:Axis>
    </lvc:CartesianChart.AxisY>
    <lvc:CartesianChart.Series>
        <lvc:LineSeries DataLabels="True" Stroke="Red" Values="2,3,1,5,4">
            <lvc:LineSeries.Fill>
                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                    <GradientStop Color="Orange" Offset="0"/>
                    <GradientStop Color="White" Offset="1"/>
                </LinearGradientBrush>
            </lvc:LineSeries.Fill>
        </lvc:LineSeries>
    </lvc:CartesianChart.Series>
</lvc:CartesianChart>

效果圖

進度環

進度環的類型是Gauge

<lvc:Gauge Width="200" Height="200" From="0" To="100" InnerRadius="50" Value="60" Uses360Mode="True" GaugeBackground="Orange" HighFontSize="32">
    <lvc:Gauge.GaugeRenderTransform>
        <TransformGroup>
            <RotateTransform Angle="90"/>
            <ScaleTransform ScaleX="1"/>
        </TransformGroup>
    </lvc:Gauge.GaugeRenderTransform>
    <lvc:Gauge.GaugeActiveFill>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="Red" Offset="0"/>
            <GradientStop Color="Green" Offset="0.5"/>
            <GradientStop Color="Blue" Offset="1"/>
        </LinearGradientBrush>
    </lvc:Gauge.GaugeActiveFill>
</lvc:Gauge>
  • InnerRadius：這個是指餅狀圖中間的圓的半徑，0 就是沒有
  • Uses360Mode：是否使用完整的圓，默認是 false ，表示半圓
  • GaugeBackground：圓環背景顏色
  • HighFontSize：中間數字大小
  • From和To：最小值和最大值
  • RotateTransform：相對於默認情況下的旋轉角度
  • ScaleTransform：大小變換，ScaleX可以為負數，這樣旋轉方向就會改變，默認順時針
  • GaugeActiveFill：填充顏色，可以用漸變色

效果圖

餅狀圖

餅狀圖的類型是PieChart

<lvc:PieChart InnerRadius="50" Width="200" Height="200">
    <lvc:PieChart.Series>
        <lvc:PieSeries Values="1" Fill="Red" DataLabels="True" Title="紅色"/>
        <lvc:PieSeries Values="2" Fill="Green" DataLabels="True" Title="綠色"/>
        <lvc:PieSeries Values="3" Fill="Blue" DataLabels="True" Title="藍色"/>
    </lvc:PieChart.Series>
</lvc:PieChart>

效果圖

行圖

行圖的類型是RowSeries，X軸和Y軸的處理方式與柱狀圖相反

<lvc:CartesianChart>
    <lvc:CartesianChart.AxisX>
        <lvc:Axis MinValue="0" MaxValue="5" ShowLabels="True" Labels="0,1,2,3,4,5">
            <lvc:Axis.Separator>
                <lvc:Separator Stroke="Red" StrokeDashArray="10"/>
            </lvc:Axis.Separator>
        </lvc:Axis>
    </lvc:CartesianChart.AxisX>
    <lvc:CartesianChart.AxisY>
        <lvc:Axis MinValue="0" MaxValue="5" ShowLabels="True" Labels="01,2,3,4,5">
            <lvc:Axis.Separator>
                <lvc:Separator Stroke="Green" StrokeDashArray="10"/>
            </lvc:Axis.Separator>
        </lvc:Axis>
    </lvc:CartesianChart.AxisY>
    <lvc:CartesianChart.Series>
        <lvc:RowSeries DataLabels="True" LabelsPosition="Parallel" Values="2,3,1,5,4" Fill="Orange"/>
    </lvc:CartesianChart.Series>
</lvc:CartesianChart>

效果圖

注意：行圖可以生成甘特圖，只需要將Values的類型要改成ChartValues<GanttPoint>，我就懶得寫了

柱狀堆積圖

柱狀堆積圖的類型是``````

<lvc:CartesianChart>
    <lvc:CartesianChart.AxisX>
        <lvc:Axis Title="X軸" ShowLabels="True" Labels="1,2,3,4,5">
            <lvc:Axis.Separator>
                <lvc:Separator Step="1" StrokeDashArray="10"/>
            </lvc:Axis.Separator>
        </lvc:Axis>
    </lvc:CartesianChart.AxisX>
    <lvc:CartesianChart.AxisY>
        <lvc:Axis Title="Y軸" MinValue="0" MaxValue="5" ShowLabels="True" Labels="0,1,2,3,4,5">
            <lvc:Axis.Separator>
                <lvc:Separator Step="1" StrokeDashArray="10"/>
            </lvc:Axis.Separator>
        </lvc:Axis>                
    </lvc:CartesianChart.AxisY>
    <lvc:CartesianChart.Series>
        <lvc:StackedColumnSeries Fill="Red" Title="紅色" Values="1,1,3,2,1">

        </lvc:StackedColumnSeries>
        <lvc:StackedColumnSeries Fill="Green" Title="綠色" Values="1,2,1,1,2">

        </lvc:StackedColumnSeries>
        <lvc:StackedColumnSeries Fill="Blue" Title="藍色" Values="1,2,3,1,2">

        </lvc:StackedColumnSeries>
    </lvc:CartesianChart.Series>
</lvc:CartesianChart>

效果圖

LiveCharts.Wpf 的使用 結束


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 LiveCharts文檔-3開始-1安裝 LiveCharts文檔-2FAQ LiveCharts文檔-4基本繪圖-3其他 WPF Convert使用 WPF使用聲音資源 Ribbon For WPF的使用 WPF資源字典使用 wpf 使用DocumentViewer打印 WPF RichTextBox的使用總結 WPF使用緩存
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM