65.9K
CodeProject 正在变化。 阅读更多。
Home

OpenFlashChart - VB.NET 雷达图示例

motaweb51
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.50/5 (5投票s)

2009 年 5 月 28 日

CPOL

1分钟阅读

viewsIcon

58022

downloadIcon

1251

如何在 ASP.NET VB.NET 项目中实现雷达图，使用 OpenFlashChart

引言

我最近一直在寻找一种简洁明了的方法，用最少的 Java 知识来绘制雷达图。我发现了 Google 的 API，对图表的样式印象深刻，但发现将其集成到我的 ASP.NET (VB.NET) 项目中有点繁琐。因此，我找到了 OpenFlashChart 组件。

背景

首先，雷达图看起来像这样

cp_ofc_vb

我发现这种图表非常有趣，因为它以单一的可视化方式呈现多个变量。图片是您运行我提供的源代码后应该得到的结果。

Using the Code

首先，请确保 下载 OpenFlashChart 的最新组件，并以常规方式将其集成到 Visual Studio 中。接下来，添加一个 ASPX 页面来显示图表。在我们的项目中，它将是 default.aspx，这是 HTML 代码

<%@ Page Language="vb" AutoEventWireup="false" 
  CodeBehind="Default.aspx.vb" Inherits="cp_ofc_vb._Default" %>

<%@ Register Assembly="OpenFlashChart" 
  Namespace="OpenFlashChart" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>OFC - Test</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <cc1:openflashchartcontrol 
              id="ofc_radar" 
              runat="server" 
              datafile="datafile/radar.aspx"
              height="200px" 
              width="300px">
        </cc1:openflashchartcontrol>
    </div>
    </form>
</body>
</html>

请注意以下几点

  • 不要忘记注册 OpenFlashChart 程序集。
  • 您可以指定图表的 height 和 width。
  • DATAFILE 属性是 ASPX 页面，它将提供值。

现在，让我们看看 DATAFILE 文件夹中的 radar.aspx.vb

'Dont forget it!
Imports OpenFlashChart

Partial Public Class radar
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, _
              ByVal e As System.EventArgs) Handles Me.Load

        Dim Chart As New OpenFlashChart.OpenFlashChart 'My chart I will work on.
        Dim data1 As New List(Of Double) 'The list of my values
        Dim label1 As New List(Of String) 'The list of my SpokeLabels
        Dim area As New Area 'An area is as display of values in a radar
        Dim radar As New RadarAxis(7) 'The kind of chart, Radar, 
                                      'we use. Note : the constructor need 
                                      'how many sectors
        Dim sp_labels As New XAxisLabels()
        'We define the XAxis or in our case, the SpokeLabels

        'This is where you place the values inside a list of double
        'You should add values here dynamically...
        data1.Add(8)
        data1.Add(9)
        data1.Add(3)
        data1.Add(6)
        data1.Add(5)
        data1.Add(2)
        data1.Add(10)

        'We define the SpokeLabels (the labels on the tips of each lines)
        'You should add values here dynamically...
        label1.Add("Text 1")
        label1.Add("Orange")
        label1.Add("Men")
        label1.Add("Not sure...")
        label1.Add("Anything")
        label1.Add("Women")
        label1.Add("Hello World")

        'We define our area. In this case, we only have one area but simply 
        'define another and add it to the chart with different values.
        With area
            .Values = data1
            .Width = 1
            .DotSize = 1
            .FillColor = "#cccccc"
            .Colour = "#fe0"
            .Loop = True
        End With

        'We add our values in our chart here
        Chart.AddElement(area)

        'We define our SpokeLabels here
        sp_labels.SetLabels(label1)

        'We define how the radar will look like...
        radar.Steps = 1
        radar.SetRange(0, 10)
        radar.SpokeLabels = sp_labels

        'Now we put the finishing touch for the chart. We define the radar
        'and we place some properties for the chart itself...
        With Chart
            .Radar_Axis = radar
            .Title = New Title("My first Radar")
            .Title.Style = "txt_noir"
            .Bgcolor = "#ffffff"
            .Tooltip = New ToolTip("#val#")
            .Tooltip.Shadow = True
            .Tooltip.Colour = "#e43456"
            .Tooltip.MouseStyle = ToolTipStyle.CLOSEST
        End With

        'Now, we must translate our properties in a JSON style with the command
        'ToPrettyString and our data will be bind inside our radar Chart
        With Response
            .Clear()
            .CacheControl = "no-cache"
            .Write(Chart.ToPrettyString())
            .End()
        End With

    End Sub

End Class

现在，尝试一下，您应该得到雷达图，就像上面一样。即使 OpenFlashChart 组件需要 JSON 格式，我们也无需在获得简洁明了的图表之前学习它。如果您需要更多信息，我建议您访问以下网站

就这样了，各位！... Pour ceux qui ont besoins, je parle français. (对于有需要的人，我说法语。)

历史

  • 2009 年 5 月 28 日：初始版本
© . All rights reserved.