LiveCharts 折线图，条形图，饼状图基本绑定实现(WPF)

总体效果如图：

1.折线图的简单绑定

此处对折线图的横坐标坐标与时间进行绑定

前台代码：

<lvc:CartesianChart Series="{Binding LineSeriesCollection}"
                            LegendLocation="Right">
            <lvc:CartesianChart.AxisY>
                <lvc:Axis></lvc:Axis>
            </lvc:CartesianChart.AxisY>
            <lvc:CartesianChart.AxisX>
                <lvc:Axis Labels="{Binding LineXLabels}"></lvc:Axis>
            </lvc:CartesianChart.AxisX>
</lvc:CartesianChart>

后台代码：

void GetLineSeriesData()
{
      List<string> titles = new List<string> { "苹果", "香蕉", "梨" };
      List<List<double>> values = new List<List<double>>
      {
           new List<double> { 30, 40, 60 },
           new List<double> { 20, 10, 50 },
           new List<double> { 10, 50, 30 }
       };
       List<string> _dates = new List<string>();
       //获取当前月的日期
       _dates = GetCurrentMonthDates();
       for (int i = 0; i < titles.Count; i++)
       {
         LineSeries lineseries = new LineSeries();
         lineseries.DataLabels = true;
         lineseries.Title = titles[i];
         lineseries.Values = new ChartValues<double>(values[i]);
         LineXLabels.Add(_dates[i]);
         LineSeriesCollection.Add(lineseries);
       }
}

2.条形图的简单绑定

前台代码：

<lvc:CartesianChart Series="{Binding ColunmSeriesCollection}"
                            LegendLocation="Right">
            <lvc:CartesianChart.AxisX>
                <lvc:Axis Labels="{Binding ColumnXLabels}"></lvc:Axis>
            </lvc:CartesianChart.AxisX>
            <lvc:CartesianChart.AxisY>
                <lvc:Axis></lvc:Axis>
            </lvc:CartesianChart.AxisY>
</lvc:CartesianChart>

后台代码：

 void GetColunmSeriesData()
{
      List<string> titles = new List<string> { "Edge", "Chrome", "Firefox", "Other" };
      List<double> columnValues = new List<double> { 10, 70, 15, 5 };

      for (int i = 0; i < titles.Count; i++)
      {
          ColumnXLabels[i] = titles[i];
      }
      ColumnSeries colunmseries = new ColumnSeries();
      colunmseries.DataLabels = true;
      colunmseries.Title = "浏览器份额";
      colunmseries.Values = new ChartValues<double>(columnValues);
      ColunmSeriesCollection.Add(colunmseries);

}

3.饼状图的简单绑定

前台代码：

<lvc:PieChart LegendLocation="
                    Bottom"
                      Series="{Binding PieSeriesCollection}"
                      DataClick="Chart_OnDataClick"
                      Hoverable="False">
            <lvc:PieChart.DataTooltip>
                <lvc:DefaultTooltip BulletSize="10"></lvc:DefaultTooltip>
            </lvc:PieChart.DataTooltip>
</lvc:PieChart>

后台代码：

void GetPieSeriesData()
{
         List<string> titles = new List<string> { "C#", "Java", "Python" };
         List<double> pieValues = new List<double> { 60, 30, 10 };
         ChartValues<double> chartvalue = new ChartValues<double>();
         for (int i = 0; i < titles.Count; i++)
         {
                chartvalue = new ChartValues<double>();
                chartvalue.Add(pieValues[i]);
                PieSeries series = new PieSeries();
                series.DataLabels = true;
                series.Title = titles[i];
                series.Values = chartvalue;
                PieSeriesCollection.Add(series);
         }
}

来源：oschina

链接：https://my.oschina.net/u/2525682/blog/3207803

标签

wpf

Live-Charts