WPF 应用 - 图表 LiveCharts

引用:LiveCharts,LiveCharts.Wpf

1. 示例

折线图

<Window
    ...
    xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf">
    <lvc:CartesianChart>
        //折线
        <lvc:CartesianChart.Series>
            <lvc:LineSeries Title="" Values=""/>
        </lvc:CartesianChart.Series>
        <lvc:CartesianChart.AxisX>
            // X 轴名称
            <lvc:Axis Labels="0,1,2,..." Title="时间/小时">
                <lvc:Axis.Separator>
                    <lvc:Separator StrokeThickness="0" Step="1"/>
                </lvc:Axis.Separator>
            </lvc:Axis>
        </lvc:CartesianChart.AxisX>
        <lvc:CartesianChart.AxisY>
            // Y 轴名称
            <lvc:Axis MinValue="0" MaxValue="10" Title="拥堵指数">
                <lvc:Axis.Separator>
                    <lvc:Separator StrokeThickness="0" Step="1.0"/>
                </lvc:Axis.Separator>
                // 垂直方向上添加横条
                <lvc:Axis.Sections>
                    <lvc:AxisSection Value="0" StrokeThickness="2" Fill="White"/>
                    <lvc:AxisSection Value="0" SectionWidth="2" Fill="#FF2CC12F"/>
                    <lvc:AxisSection Value="2" SectionWidth="4" Fill="#FF2CC12F"/>
                </lvc:Axis.Sections>
            </lvc:Axis>
        </lvc:CartesianChart.AxisY>
        <lvc:CartesianChart.DataTooltip>
                    <lvc:DefaultTooltip Foreground="#FFB1E2FF" Background="#99000000"></lvc:DefaultTooltip>
        </lvc:CartesianChart.DataTooltip>
    <lvc:CartesianChart>
</Window>

数据比例源:

xxSeriesCollection = new SeriesCollection {
    new PieSeries
    {
        Title = "A",
        Values = new ChartValues<double> { 5 },
        DataLabels = false,
        Fill = new SolidColorBrush(Color.FromRgb(24, 145, 247)),
        Stroke = transparent,
    },
    new PieSeries {...}
}

2. 其他

  1. LegendLocation 表示标识(标题+颜色)放在哪里;none 表示不显示;
  2. InnerRadius 表示饼状图的空心半径;
  3. LegendLocation 的尺寸
  4. toolTip

3. 源码和文档

  1. github https://github.com/Live-Charts/Live-Charts/tree/master/WpfView
  2. https://lvcharts.net/App/documentation/beta/wpf/LiveCharts-Wpf-Axis
posted @ 2021-03-11 12:13  鑫茂  阅读(194)  评论(0编辑  收藏  举报