Question

我正在使用Silverlight和WPF证券交易所申请。我正在尝试创建一个像散点图一样的图形。

我该如何绘制这张图表？它可以通过Silverlight Toolkit图完成吗？或者任何人都可以建议我任何简单但漂亮的图表库？

我在绘画中绘制了图表图像供您参考。 enter image description here

Answer 1

为什么不使用标准的WPF / Silverlight绘图方法？由于您的要求不是太复杂，您可以抛出一些带有一些直线和矩形的画布：

private void AddEdge(Point from, Point to, int nodeWidth)
{
    Line line = new Line()
    {
        X1 = from.X,
        Y1 = from.Y,
        X2 = to.X,
        Y2 = to.Y,
        Stroke = Brushes.Black,
    };

    Rectangle nodeFrom = new Rectangle()
    {
        Height = nodeWidth,
        Width = nodeWidth,
        Fill = Brushes.Black,
    };
    Canvas.SetLeft(nodeFrom, from.X - nodeWidth / 2);
    Canvas.SetTop(nodeFrom, from.Y - nodeWidth / 2);

    Rectangle nodeTo = new Rectangle()
    {
        Height = nodeWidth,
        Width = nodeWidth,
        Fill = Brushes.Black,
    };
    Canvas.SetLeft(nodeTo, to.X - nodeWidth / 2);
    Canvas.SetTop(nodeTo, to.Y - nodeWidth / 2);

    LayoutRoot.Children.Add(line);
    LayoutRoot.Children.Add(nodeFrom);
    LayoutRoot.Children.Add(nodeTo);
}

然后您可以轻松添加边缘：

Point from = new Point(15, 15);
Point to = new Point(100, 200);

AddEdge(from, to, 8);

您也可以根据需要自定义节点和线条的样式，只需更改画笔。

希望它有所帮助！

Answer 2

您可以使用Visifire轻松创建上述图表。我已经附加了以下XAML代码。

<vc:Chart xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts" Theme="Theme1" Width="500" Height="300">

            <vc:Chart.Series>
                <vc:DataSeries RenderAs="Line">
                    <vc:DataSeries.DataPoints>
                        <vc:DataPoint XValue="1" YValue="6"></vc:DataPoint>
                        <vc:DataPoint XValue="2" YValue="10"></vc:DataPoint>
                        <vc:DataPoint XValue="1.5" YValue="" ></vc:DataPoint>
                        <vc:DataPoint XValue="1.5" YValue="5" ></vc:DataPoint>
                        <vc:DataPoint XValue="3" YValue="3" ></vc:DataPoint>
                        <vc:DataPoint XValue="2.8" YValue="" ></vc:DataPoint>
                        <vc:DataPoint XValue="2.8" YValue="8" ></vc:DataPoint>
                        <vc:DataPoint XValue="3.5" YValue="12" ></vc:DataPoint>
                        <vc:DataPoint XValue="3.5" YValue="" ></vc:DataPoint>
                        <vc:DataPoint XValue="3.5" YValue="8" ></vc:DataPoint>
                        <vc:DataPoint XValue="4.2" YValue="12" ></vc:DataPoint>
                        <vc:DataPoint XValue="4" YValue="" ></vc:DataPoint>
                        <vc:DataPoint XValue="4" YValue="8" ></vc:DataPoint>
                        <vc:DataPoint XValue="5" YValue="6" ></vc:DataPoint>
                    </vc:DataSeries.DataPoints>
                </vc:DataSeries>
            </vc:Chart.Series>
        </vc:Chart>

正如你所看到的，我在这里使用过单行系列。

以下是上图XAML的图像。

enter image description here

Answer 3

你想要漂亮的图表吗？然后我建议你看看Visifire。您可以查看Visifire Chart Gallery中的以下示例。

http://visifire.com/silverlight_spline_charts_gallery.php

enter image description here

如何创建断开的折线图？

3 个答案: