最近用DevExpress的WPF图表控件做柱形图看板,总结记录了一些笔记:
1.显示图例:
<dxc:ChartControl.Legend> <dxc:Legend /> </dxc:ChartControl.Legend>
2.柱形图标题:
<dxc:ChartControl.Titles> <dxc:Title HorizontalAlignment="Center" VerticalAlignment="Center" Content="焊接" Foreground="#03CACC"/> </dxc:ChartControl.Titles>
3.柱形图颜色:
<dxc:ChartControl.Palette> <dxc:YellowPalette/> </dxc:ChartControl.Palette>
4.柱形图外区域填充背景色:
<dxc:XYDiagram2D.DefaultPane> <dxc:Pane DomainBorderBrush="#343246" DomainBrush="#343246" /> </dxc:XYDiagram2D.DefaultPane>
5.柱形图颜色设置为一样:ColorEach="True"
<dxc:XYDiagram2D Background="#343246" SeriesDataMember="Name" BorderBrush="#FF343246"> <dxc:XYDiagram2D.SeriesTemplate> <dxc:BarSideBySideSeries2D Background="#343246" LabelsVisibility="True" ArgumentDataMember="Name" ValueDataMember="Value" ColorEach="True"> <dxc:BarSideBySideSeries2D.Label> <dxc:SeriesLabel Background="#343246" ConnectorVisible="False" Indent="0" dxc:BarSideBySideSeries2D.LabelPosition="Outside"> <dxc:SeriesLabel.ElementTemplate> <DataTemplate> <Label Content="{Binding Text}" Foreground="Green" FontSize="15"/> </DataTemplate> </dxc:SeriesLabel.ElementTemplate> </dxc:SeriesLabel> </dxc:BarSideBySideSeries2D.Label> </dxc:BarSideBySideSeries2D> </dxc:XYDiagram2D.SeriesTemplate> <dxc:XYDiagram2D.AxisX> <dxc:AxisX2D> <dxc:AxisX2D.Label> <dxc:AxisLabel Foreground="White" BorderBrush="Black"/> </dxc:AxisX2D.Label> </dxc:AxisX2D> </dxc:XYDiagram2D.AxisX> <dxc:XYDiagram2D.AxisY> <dxc:AxisY2D GridLinesVisible="False"> <dxc:AxisY2D.Label> <dxc:AxisLabel Background="#343246" Foreground="White" BorderBrush="#FF343246"/> </dxc:AxisY2D.Label> </dxc:AxisY2D> </dxc:XYDiagram2D.AxisY> <dxc:XYDiagram2D.DefaultPane> <dxc:Pane DomainBorderBrush="#343246" DomainBrush="#343246" /> </dxc:XYDiagram2D.DefaultPane> <dxc:LineSeries2D MarkerVisible="True" Background="#343246" LabelsVisibility="True" ArgumentDataMember="Key" ValueDataMember="Value" x:Name="series1" Brush="#FF343246"> <dxc:LineSeries2D.LineStyle> <dxc:LineStyle Thickness="1"/> </dxc:LineSeries2D.LineStyle> </dxc:LineSeries2D> </dxc:XYDiagram2D>
6.设置平行X轴的横线:
<dxc:AxisY2D.ConstantLinesInFront> <dxc:ConstantLine Brush="#FF0000" LegendText="计划产量"> <dxc:ConstantLine.Title> <dxc:ConstantLineTitle Content="计划产量:20"/> </dxc:ConstantLine.Title> <dxc:ConstantLine.Value> <sys:Int32>20</sys:Int32> </dxc:ConstantLine.Value> </dxc:ConstantLine> </dxc:AxisY2D.ConstantLinesInFront>
7.设置Y轴坐标(X轴类似):
<dxc:AxisY2D.Label> <dxc:AxisLabel Background="#343246" Foreground="White" BorderBrush="#FF343246"/> </dxc:AxisY2D.Label>
8.设置低于平行X轴的横线的颜色(根据柱子的值,设置柱子不同颜色):
dxc:ChartControl 的 CustomDrawSeriesPoint="chartControl_CustomDrawSeriesPoint" 事件:
<dxc:ChartControl Background="#343246" Name="chartControl1" Grid.Row="2" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Top" CustomDrawSeriesPoint="chartControl_CustomDrawSeriesPoint" >
C#代码:
private void chartControl_CustomDrawSeriesPoint(object sender, CustomDrawSeriesPointEventArgs e) { CorrectDrawOptions(e.SeriesPoint.Value, e.DrawOptions); } private void CorrectDrawOptions(double val, DrawOptions drawOptions) { if (drawOptions!=null&&val <250) { drawOptions.Color = Color.FromArgb(0xFF, 0xC7, 0x39, 0x0C); //Red } else if (val < 350) { drawOptions.Color = Color.FromArgb(0xFF, 0xF9, 0xAA, 0x0F); //Yellow } else { drawOptions.Color =Color.FromArgb(0xFF, 0x51, 0x89, 0x03); //Green } }
9.折线图滚动条:
Diagram.AxisX.Range.Auto = false; //要开启滚动条必须将其设置为false Diagram.EnableAxisXScrolling = true;//启用滚动条 Diagram.AxisX.Range.SideMarginsEnabled = false;//启用滚动条 XYDiagram Diagram { get { return chartControl1.Diagram as XYDiagram; } }
10.设置Y轴最小坐标和最大坐标
((XYDiagram2D)this.chartControl1.Diagram).AxisY.WholeRange = new Range() { MinValue = 0, MaxValue = 300 };