728x90

🔶 차트 관련

◾ 제목표시

  <!-- 제목 -->
  <dxc:ChartControl.Titles>
      <dxc:Title Content="제목" Dock="Top" HorizontalAlignment="Center"/>
  </dxc:ChartControl.Titles>
  ...
  
  <!-- Y축 제목 -->
  <dxc:AxisY2D.Title>
     <dxc:AxisTitle Content="Y축 제목" />
  </dxc:AxisY2D.Title>

◾ 줌 + 스크롤 숨기기

	...
<!-- EnableAxisXNavigation : 스크롤 -->
<dxc:XYDiagram2D SeriesItemsSource="{Binding Data}" EnableAxisXNavigation="True">
  <!-- 줌넣고 스크롤은 숨기기-->
   <dxc:XYDiagram2D.DefaultPane>
       <dxc:Pane Name="pane">
          <dxc:Pane.AxisXScrollBarOptions>
               <dxc:ScrollBarOptions Visible="False"/>
           </dxc:Pane.AxisXScrollBarOptions>
      	 <dxc:Pane.AxisYScrollBarOptions>
   	   <dxc:ScrollBarOptions Visible="False"/>
	</dxc:Pane.AxisYScrollBarOptions>
 </dxc:Pane>
</dxc:XYDiagram2D.DefaultPane>
	...

https://docs.devexpress.com/WPF/11234/controls-and-libraries/charts-suite/chart-control/zoom-scroll-and-rotate-the-chart/zoom-and-scroll-in-2d-xy-charts

Zoom and Scroll in 2D XY-Charts | WPF Controls | DevExpress Documentation

The chart control supports scroll and zoom operations. This topic describes end-user capabilities and the API you can use to perform these operations in code. Use the XYDiagram2D.EnableAxisXNavigation and XYDiagram2D.EnableAxisYNavigation properties to all

docs.devexpress.com

◾ 범례 추가

	...
<dxc:ChartControl.Legend>
   <dxc:Legend HorizontalPosition="Right" VerticalPosition="Top" />
</dxc:ChartControl.Legend>
	...

◾ 차트 안쪽 여백?

<!-- 차트 안쪽 여백? -->
<dxc:AxisY2D.WholeRange>
   <dxc:Range SideMarginsValue="0.5" dxc:AxisY2D.AlwaysShowZeroLevel="False" />
</dxc:AxisY2D.WholeRange>

◾ 점선 기준선

<!-- 기준선 -->
<dxc:AxisY2D.ConstantLinesInFront>
    <dxc:ConstantLine Value="325" LegendText="기준선이름" Visible="True" Brush="색깔">
       <dxc:ConstantLine.Title>
           <dxc:ConstantLineTitle Content="기준선이름" BorderBrush="색깔"/>
       </dxc:ConstantLine.Title>
     <dxc:ConstantLine.LineStyle>
     <dxc:LineStyle Thickness="2" DashCap="Flat" LineJoin="Miter" MiterLimit="10">
     	<dxc:LineStyle.DashStyle>
            <DashStyle Dashes="2 1 2 1"/>
        </dxc:LineStyle.DashStyle>
     </dxc:LineStyle>
   </dxc:ConstantLine.LineStyle>
  </dxc:ConstantLine>
</dxc:AxisY2D.ConstantLinesInFront>

◾ 마우스 over 시 Data 뜨도록

 <!-- 차트 시작 -->
   <dxc:ChartControl.Diagram>
      <dxc:XYDiagram2D SeriesItemsSource="{Binding Data}">
         <dxc:XYDiagram2D.AxisX>
            <dxc:AxisX2D>
               <!-- X축 -->
               <dxc:AxisX2D.DateTimeScaleOptions>
                   <dxc:ManualDateTimeScaleOptions MeasureUnit="Day"/>
               </dxc:AxisX2D.DateTimeScaleOptions>
               ...

◾ 차트 데이터가 작아서 옹졸해보인다면

 <dxc:AxisX2D.WholeRange>
    <dxc:Range MinValue="01/01/2017" MaxValue="12/31/2022" SideMarginsValue="40" 
     dxc:AxisY2D.AlwaysShowZeroLevel="False" />
 </dxc:AxisX2D.WholeRange>

혹시 형이 맞지 않은 Range가 들어있는지 확인한다.(나는 String인데 Range가 Date로 들어가있다)

🔶 축 관련

◾ X축 간격 주기

	...
<dxc:AxisX2D.DateTimeScaleOptions>
    <dxc:ManualDateTimeScaleOptions MeasureUnit="Day" AutoGrid="True"
                                  GridAlignment="Day" GridOffset="0" GridSpacing="200"/>
     </dxc:AxisX2D.DateTimeScaleOptions>
     ...

https://docs.devexpress.com/WPF/6336/controls-and-libraries/charts-suite/chart-control/axes/axis-labels

Axis Labels | WPF Controls | DevExpress Documentation

The Chart Control can display default and custom axis labels. Default labels are generated based on series data. Configure Custom Labels You can create custom axis labels and modify their position and content. The Chart Control can display custom and defau

docs.devexpress.com

◾ 년,월,일 뜨도록

 <!-- 차트 시작 -->
   <dxc:ChartControl.Diagram>
      <dxc:XYDiagram2D SeriesItemsSource="{Binding Data}">
         <dxc:XYDiagram2D.AxisX>
            <dxc:AxisX2D>
               <!-- X축 -->
               <dxc:AxisX2D.Label>
                  <dxc:AxisLabel TextPattern="{}{A:yyyy-M-d}"/>
               </dxc:AxisX2D.Label>
               ...

◾ 축 표시형식 변경 및 회전

	...
<dxc:AxisX2D.Label>
    <dxc:AxisLabel TextPattern="{}{A:yy-M-d}" Angle="0" FontSize="10" />
</dxc:AxisX2D.Label>
	...

https://docs.devexpress.com/WPF/DevExpress.Xpf.Charts.AxisLabel.Angle

◾ 년도별 표시하기

 <!-- 차트 시작 -->
   <dxc:ChartControl.Diagram>
      <dxc:XYDiagram2D SeriesItemsSource="{Binding Data}">
         <dxc:XYDiagram2D.AxisX>
            <dxc:AxisX2D>
               <!-- X축 -->
               <dxc:AxisX2D.WholeRange>
                  <dxc:Range MinValue="1/1/2017" MaxValue="12/31/2022"/>
               </dxc:AxisX2D.WholeRange>
               ...

→ 2017년 부터 2022년까지 년도별로 나온다.

◾ 축 라벨이 모두 뜨지 않을 때

<dxc:AxisX2D.DateTimeScaleOptions>
   <dxc:ManualDateTimeScaleOptions MeasureUnit="Day" AutoGrid="False"
                                  GridAlignment="Day" GridSpacing="1"/>
</dxc:AxisX2D.DateTimeScaleOptions>

https://supportcenter.devexpress.com/ticket/details/t985909/show-all-labels-in-x-axis

Show all labels in X-axis

You have yet to view any tickets. Your search criteria do not match any tickets. A server error occurred while processing your request. Please try again at a later time.

supportcenter.devexpress.com

◾ 축 라벨을 원하는 데이터만 표시하고 싶을 때

cs파일에서 DateTime으로 받아온 뒤 Lable 출력 형식을 Date로 설정하니 해당일자의 모든 날짜가 찍혀 나왔다. 값이 있는 날만 x축에 표시하고 싶다면 cs파일에서 DateTime을 String으로 바꿔주면된다.