WPF Toolkit Chart--多Y轴显示

效果:


<Window x:Class="Chart.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525"
xmlns:tk="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit" Loaded="Window_Loaded">
<Grid>
<tk:Chart Name="chart1" Title="Chart Title" >
<tk:Chart.Axes>
<tk:LinearAxis Orientation="X" Interval="1" Title="次数"></tk:LinearAxis>
</tk:Chart.Axes>
<tk:LineSeries x:Name="line1" DependentValuePath="Value" IndependentValuePath="Key">
<tk:LineSeries.DependentRangeAxis>
<tk:LinearAxis Orientation="Y" Interval="10" Minimum="0" Maximum="100" Title="Series1"></tk:LinearAxis>
</tk:LineSeries.DependentRangeAxis>
</tk:LineSeries>
<tk:LineSeries x:Name="line2" DependentValuePath="Value" IndependentValuePath="Key">
<tk:LineSeries.DependentRangeAxis>
<tk:LinearAxis Orientation="Y" Interval="100" Title="Series2"></tk:LinearAxis>
</tk:LineSeries.DependentRangeAxis>
</tk:LineSeries>
<tk:LineSeries x:Name="line3" DependentValuePath="Value" IndependentValuePath="Key">
<tk:LineSeries.DependentRangeAxis>
<tk:LinearAxis Orientation="Y" Interval="1000" Title="Series3"></tk:LinearAxis>
</tk:LineSeries.DependentRangeAxis>
</tk:LineSeries>
</tk:Chart>
</Grid>
</Window>


using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace Chart
{
/// <summary>
/// MainWindow.xaml 的交互逻辑
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}

private void Window_Loaded(object sender, RoutedEventArgs e)
{
Dictionary<int, int> d = new Dictionary<int, int>();
d.Add(1, 50);
d.Add(2, 40);
d.Add(3, 50);
d.Add(4, 40);
d.Add(5, 50);

line1.ItemsSource = d;

Dictionary<int, int> d1 = new Dictionary<int, int>();
d1.Add(1, 100);
d1.Add(2, 200);
d1.Add(3, 300);
d1.Add(4, 400);
d1.Add(5, 500);

line2.ItemsSource = d1;

Dictionary<int, int> d2 = new Dictionary<int, int>();
d2.Add(1, 1000);
d2.Add(2, 3000);
d2.Add(3, 4000);
d2.Add(4, 2000);
d2.Add(5, 5000);

line3.ItemsSource = d2;
}

}
}

WPF Toolkit Chart--多Y轴显示,布布扣,bubuko.com

时间: 2024-10-14 00:00:04

WPF Toolkit Chart--多Y轴显示的相关文章

WPF Toolkit Chart--动态换列

效果: <Window x:Class="切换显示曲线.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width=&qu

WPF Toolkit Chart

<Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:toolkit="clr-namespace:System.Windows.Control

Chart.js Y轴数据以百分比展示

新手一枚,解决的问题喜欢记录,也许正好有人在网上迷茫的百度着.-0- 最近使用Chart.js做折线图的报表展示,直接显示整数啥的很好弄毕竟例子直接在哪里可以用,百分比就没办法了.百度慢慢汲取营养,虽然总是几篇文章复制粘贴,但还有有收获,然后自己捣鼓半天总算是弄出来了... 首先参考: http://www.chartjs.org/docs/latest/ 引用js,学习基本等等... 然后数据什么的就不说了直说怎么展示, 在配置文件中yAxes>ticks>callback 中设置你需要在Y

WPF ToolKit Chart 自定义样式

1.引用:WPFToolkit.dll, System.Windows.Controls.DataVisualization.Toolkit.dll 2. 页面代码参考如下: <UserControl x:Class="GDNXFD.Alert.IFIXControls.StationPieChart" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="

[办公应用]如何制作二Y轴图(excel)

有时候我们会遇到一种图表,就是X轴一致,可是Y轴的数据相差很大.如下图中,年龄和收入就不是一个数量级,在图表中显示的时候,“年龄”的曲线根本看不到(表中数据仅供举例): 解决的方法就是使用双Y轴显示,把年龄的数据可以显示到另一边.步骤如下: 1.在图表工具条中选中数据值较小的那个系列.本例中的"年龄". 2.在图中的系列(下图中的四个小黑方框上面)上,单击右键.选择“数据系列格式”. 3.选择“数据系列格式”后,在如下图页面,选择“次坐标轴”.o(∩_∩)o…确定,看到结果了吗? 4.

Echarts 多条数据值一样时,y轴数值错位?

今天开发遇到了一个bug,如上图: 两条曲线值一样,但是y轴显示确不一样??   然后一顿debugger操作,发现不是数据问题...最后找到了答案 stack: '总量', 把这个属性删除 效果如 下   原文地址:https://www.cnblogs.com/javascript9527/p/12681307.html

WPF DevExpress Chart控件多Y轴,指定数据参考的Y轴

当Chart中有两个及以上的Y轴时,我们就要指明图表中的柱子或折线对应的是哪个Y轴了,这时候需要指明柱子或者折线的dxc:XYDiagram2D.SeriesAxisY属性,来设置对应的Y轴(dxc:XYDiagram2D.SeriesAxisY="{Binding ElementName=y2}"),其中Binding的ElementName就是需要对应的Y轴的Name(即这里的y2),界面代码如下: <dxc:ChartControl DataSource="{Bi

Highcharts属性与Y轴数据值刻度显示Y轴最小最大值

Highcharts 官网:https://www.hcharts.cn/demo/highcharts Highcharts API文档:https://api.hcharts.cn/highcharts#yAxis.tickmarkPlacement Highcharts属性与Y轴数据值刻度显示Y轴最小最大值 Highcharts.setOptions({global:{useUTC : false}}); $(function(){ //声明报表对象 var chart = new Hig

chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法[bubuko.com]

chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法,原文: 默认情况下如下图 Y轴并不是从0开始,这样折现图的幅度会很大,不是正常的幅度,解决办法如下, 示例代码: window.onload = function () { var ctx = document.getElementById("canvas").getContext("2d"); window.myLine = new Chart(ctx).Line(lineChartDat