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

Question

如何使用wpf工具包绘制连续折线图。例如心率图。但我可以同时使用android和windows 8这个图表。

Answer 1

互联网上有一些第三方图书馆。如果你谷歌它你会发现很多。不幸的是（据我所知）Android平台不支持wpf。所以对于android，我无能为力。

但是，如果你想以“艰难的方式”去做这里是一个起点：Wpf非常擅长图形。即使使用低资源（cpu，gpu，memory）设备，其性能也非常好。在我的一个项目中，我需要一个连续的折线图。在我的场景中，我有一个2的数据点流。第一个是BPM，第二个是IBI。我想将BPM显示为区域图，并将IBI显示为行。这是一张图片：

我将其作为用户控件。它包含一个Canvas for chart，Textblocks for information。控件放在网格上。对于布局，我不会在主题创建图表时提供信息。

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

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);

在添加新的Queue点之前不要忘记清除画布，并尝试更新像这样的队列：

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

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