当前位置： 文江博客话题详情

如何创建断开线图？

发布于 2024-12-02 12:08:00 字数 223 浏览 1 评论 0原文

我正在使用 Silverlight 和 WPF 证券交易所应用程序。我正在尝试创建一个类似散线图的图表。

我怎样才能绘制这个图表？可以用Silverlight Toolkit graph来完成吗？或者有人可以向我推荐任何简单但美观的图表库吗？

我用paint画了图表图像供您参考。 在此处输入图像描述

原文

I am working with Silverlight and WPF stock exchange application. I'm trying to create a graph like scattered line graph.

How can I draw this chart? Can it be done by Silverlight Toolkit graph? Or can any one suggest me any easy but nice looking charting library?

I have drawn the chart image in paint for your reference.
enter image description here

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

∞梦里开花 2024-12-09 12:08:00

您可以使用 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 的图像。

在此处输入图像描述

You can create the above chart easily using Visifire. I have attached the following XAML code for the same.

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

As you can see, I have used single series here with broken lines.

Below is the image for the above chart XAML.

enter image description here

回复 原文
-残月青衣踏尘吟 2024-12-09 12:08:00

为什么不直接使用标准的 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);

您还可以通过更改画笔来根据需要自定义节点和线条的样式。

希望有帮助！

Why not just use the standard WPF/Silverlight drawing methods? Since your requirements are not too complex, you could just throw a canvas with some lines and rectangles:

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

Then you can add edges easily:

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

AddEdge(from, to, 8);

You can also customize the styles of the nodes and lines as you want by only changing the brushes.

Hope it helps!

回复 原文
久隐师 2024-12-09 12:08:00

您想要漂亮的图表吗？那我建议你看看Visifire。您可以从 Visifire 图表库查看以下示例。

http://visifire.com/silverlight_spline_charts_gallery.php

在此处输入图像描述

You want beautiful chart right? Then I Suggest you to look into Visifire. You can have a look to the following example from Visifire Chart Gallery.

http://visifire.com/silverlight_spline_charts_gallery.php

enter image description here

回复 原文
~没有更多了~

关于作者

独夜无伴

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

胡图图

文章 0 评论 0

zt006

文章 0 评论 0

z祗昰~

文章 0 评论 0

冰葑

文章 0 评论 0

野の

文章 0 评论 0

天空

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文