如何使用 wpf 工具包绘制连续折线图。

Question

如何使用wpf toolkit绘制连续折线图。例如心率 chart.But 我可以同时使用 android 和 windows 8 这个图表。

Answer 1

互联网上有一些第 3 方库。如果你 google 它你会发现很多。不幸的是（据我所知）Android 平台不支持 wpf。所以对于android，我帮不上忙

但是，如果您想在 "hard way" 中做到这一点，这里是一个起点：Wpf 非常擅长图形。即使是低资源（cpu、gpu、内存）设备，它的性能也非常好。在我的一个项目中，我需要一个连续的折线图。在我的场景中，我有一个数据点流 2。第一个是 BPM，第二个是 IBI。我想将 BPM 显示为面积图，将 IBI 显示为线。这是一张图片：

我把它做成了一个用户控件。它包含用于图表的 Canvas，用于信息的文本块。控件位于网格上。对于布局，我不会在主题创建图表时提供信息。

canvas 将代表图表。绿色、黄色和红色垂直线是 BPM 值，蓝色（浅绿色）线是 IBI 值。因此我有两个系列。 Canvas 宽度是我的 window 数据点。一旦 window 满了，它就会开始连续滚动。为了实现这一点，每个系列都有一个队列。

Queue<int> beatsColl, ibisColl;

如果每行的笔画宽度为 2 个像素，则队列长度 queueSize 为 canvas.width / 2。 Queue 是一个遵循 FIFO 原则的集合。因此，这为我们提供了线条的步行视图。

当新数据到达时，我们需要计算行的长度。即：队列中的当前值/最大值。然后反过来，因为我们要从下往上画线。

double lineLength = 1 - ( currentValue / maxValue );
double y1 = canvas.ActualHeight;
double y2 = y1 * lineLength; //to calculate coordinates.

X1 和 X2 坐标按以下步骤计算：canvas.ActualWidth / line stroke width 然后我们可以创建线：

//... for each points in Queue
// i is the nTH value of Queue 
double xX = canvas.ActualWidth - ( i * lineWidth ); 
Line l = new Line() {
    Stroke = selectiveBrush,
    StrokeThickness = lineWidth,
    X1 = xX,
    X2 = xX,
    Y1 = y1,
    Y2 = y2
};
//then add the line to the canvas
canvas.Children.Add(l);

在添加新队列点之前不要忘记清除 canvas 并尝试像这样更新队列：

void putB( int b ) {
    beatsColl.Enqueue( b );
    if (beatsColl.Count > queueSize)
        beatsColl.Dequeue();
}

queueSize 是如上所述计算的单独 int。

如何使用 wpf 工具包绘制连续折线图。

How can I draw continuous line chart with wpf toolkit.

wpf

charts

line

toolkit