Web图表开发-用ChartDirector画极线图

关注

转载最新推荐文章于 2026-09-21 09:15:30 发布 1.8k 阅读 AI 写同款· GEO 优化 ›

ChartDirector图表库实战开发指南与示例 ChartDirector 是一个功能强大的图表生成库，广泛应用于数据可视化领域。它支持多种图表类型，并提供了丰富的API接口，以实现从基础到复杂的定制化图表需求。ChartDirector允许用户自由定制图表的颜色和字体，以便于与应用程序的界面风格保持一致，或者为了满足品牌化需求。自定义颜色和字体不仅能提升图表的外观，还可以通过合适的视觉设计提高图表所传达信息的可读性和吸引力。图表的颜色配置通常涉及到各个图表元素的背景色、边框色、数据区域色以及各种视觉辅助元素的颜色。阅读详情

在这个例子中讲述了如何在ChartDirector中创建极地散点图，同时还演示了如何沿着角度的方向交替使用背景颜色。

这样的极地散点图可以使用创建极线图加数据符号来绘制，线条的宽度设置为0，这样擦可以只看见数据符号，出现散点图的效果。ChartDirector下载

图表控件ChartDirector使用教程：创建极地散点图

详细的步骤如下：

使用PolarChart.addLineLayer创建一个极线图
使用PolarLayer.setDataSymbol启动数据符号
使用PolarLayer.setLineWidth设置线条的宽度为0

在这个例子中，值得注意的是这个图表的背景色是沿着角度的方向使用了两种交互的颜色而这个效果呢就是使用PolarChart.setPlotAreaBg实现的。

具体的代码如下：

100

101

      // ChartDirector for ColdFusion API Access Point
     
      cd = CreateObject(
      "java"
      , 
      "ChartDirector.CFChart"
      );
     
      // A utility to allow us to create arrays with data in one line of code
     
      function Array() {
     
      var result = ArrayNew(
      1
      );
     
      var i = 
      0
      ;
     
      for 
      (i = 
      1
      ; i LTE ArrayLen(arguments); i = i + 
      1
      )
     
      result[i] = arguments[i];
     
      return 
      result;
     
      }
     
      // The data for the chart
     
      data0 = Array(
      43
      , 
      89
      , 
      76
      , 
      64
      , 
      48
      , 
      18
      , 
      92
      , 
      68
      , 
      44
      , 
      79
      , 
      71
      , 
      85
      );
     
      angles0 = Array(
      45
      , 
      96
      , 
      169
      , 
      258
      , 
      15
      , 
      30
      , 
      330
      , 
      260
      , 
      60
      , 
      75
      , 
      110
      , 
      140
      );
     
      data1 = Array(
      50
      , 
      91
      , 
      26
      , 
      29
      , 
      80
      , 
      53
      , 
      62
      , 
      87
      , 
      19
      , 
      40
      );
     
      angles1 = Array(
      230
      , 
      210
      , 
      240
      , 
      310
      , 
      179
      , 
      250
      , 
      244
      , 
      199
      , 
      89
      , 
      160
      );
     
      data2 = Array(
      88
      , 
      65
      , 
      76
      , 
      49
      , 
      80
      , 
      53
      );
     
      angles2 = Array(
      340
      , 
      310
      , 
      340
      , 
      210
      , 
      30
      , 
      300
      );
     
      // The labels on the angular axis (spokes)
     
      labels = Array(
      "North"
      , 
      "North<*br*>East"
      , 
      "East"
      , 
      "South<*br*>East"
      , 
      "South"
      ,
     
      "South<*br*>West"
      , 
      "West"
      , 
      "North<*br*>West"
      );
     
      // Create a PolarChart object of size 460 x 460 pixels
     
      c = cd.PolarChart(
      460
      , 
      460
      );
     
      // Add a title to the chart at the top left corner using 15pts Arial Bold Italic font
     
      c.addTitle2(cd.TopLeft, 
      "<*underline=2*>Plants in Wonderland"
      , 
      "Arial Bold Italic"
      ,
     
      15
      );
     
      // Set center of plot area at (230, 240) with radius 180 pixels
     
      c.setPlotArea(
      230
      , 
      240
      , 
      180
      );
     
      // Use alternative light grey/dark grey sector background color
     
      c.setPlotAreaBg(
      "0xdddddd"
      , 
      "0xeeeeee"
      , False);
     
      // Set the grid style to circular grid
     
      c.setGridStyle(False);
     
      // Add a legend box at the top right corner of the chart using 9 pts Arial Bold font
     
      c.addLegend(
      459
      , 
      0
      , True, 
      "Arial Bold"
      , 
      9
      ).setAlignment(cd.TopRight);
     
      // Set angular axis as 0 - 360, either 8 spokes
     
      c.angularAxis().setLinearScale2(
      0
      , 
      360
      , labels);
     
      // Set the radial axis label format
     
      c.radialAxis().setLabelFormat(
      "{value} km"
      );
     
      // Add a blue (0xff) polar line layer to the chart using (data0, angle0)
     
      layer0 = c.addLineLayer(data0, 
      "0x0000ff"
      ,  
      "Immortal Weed"
      );
     
      layer0.setAngles(angles0);
     
      layer0.setLineWidth(
      0
      );
     
      layer0.setDataSymbol(cd.TriangleSymbol, 
      11
      );
     
      // Add a red (0xff0000) polar line layer to the chart using (data1, angles1)
     
      layer1 = c.addLineLayer(data1, 
      "0xff0000"
      ,  
      "Precious Flower"
      );
     
      layer1.setAngles(angles1);
     
      // Disable the line by setting its width to 0, so only the symbols are visible
     
      layer1.setLineWidth(
      0
      );
     
      // Use a 11 pixel diamond data point symbol
     
      layer1.setDataSymbol(cd.DiamondSymbol, 
      11
      );
     
      // Add a green (0x00ff00) polar line layer to the chart using (data2, angles2)
     
      layer2 = c.addLineLayer(data2, 
      "0x00ff00"
      ,  
      "Magical Tree"
      );
     
      layer2.setAngles(angles2);
     
      // Disable the line by setting its width to 0, so only the symbols are visible
     
      layer2.setLineWidth(
      0
      );
     
      // Use a 9 pixel square data point symbol
     
      layer2.setDataSymbol(cd.SquareSymbol, 
      9
      );
     
      // Output the chart
     
      chart1URL = c.makeSession(GetPageContext(), 
      "chart1"
      );
     
      // Include tool tip for the chart
     
      imageMap1 = c.getHTMLImageMap(
      ""
      , 
      ""
      ,
     
      "title='{dataSetName} at ({value} km, {angle} deg)'"
      );
     
      </cfscript>
     
      <html>
     
      <body style=
      "margin:5px 0px 0px 5px"
      >
     
      <div style=
      "font-size:18pt; font-family:verdana; font-weight:bold"
      >
     
      Polar Scatter Chart
     
      </div>
     
      <hr style=
      "border:solid 1px #000080" 
      />
     
      <cfoutput>
     
      <div style=
      "font-size:9pt; font-family:verdana; margin-bottom:1.5em"
      >
     
      <a href=
      'viewsource.cfm?file=#CGI.SCRIPT_NAME#'
      >View Source Code</a>
     
      </div>
     
      <img src=
      "getchart.cfm?#chart1URL#" 
      usemap=
      "##map1" 
       border=
      "0" 
      />
     
      <map name=
      "map1"
      >#imageMap1#</map>
     
      </cfoutput>
     
      </body>
     
      </html>

下面再来看看如何在ChartDirector创建完整的带数据符号和数据标签的极线图表，如下所示：

图表控件ChartDirector使用教程：极线图表创建（附源码）

对于实现以上的这个图表，主要采用以下的步骤完成：

实现的代码如下：

100

101

102

103

104

105

106

107

108

      cfscript>
     
      // ChartDirector for ColdFusion API Access Point
     
      cd = CreateObject(
      "java"
      , 
      "ChartDirector.CFChart"
      );
     
      // A utility to allow us to create arrays with data in one line of code
     
      function Array() {
     
      var result = ArrayNew(
      1
      );
     
      var i = 
      0
      ;
     
      for 
      (i = 
      1
      ; i LTE ArrayLen(arguments); i = i + 
      1
      )
     
      result[i] = arguments[i];
     
      return 
      result;
     
      }
     
      // The data for the chart
     
      data0 = Array(
      90
      , 
      25
      , 
      40
      , 
      55
      , 
      68
      , 
      44
      , 
      79
      , 
      85
      , 
      50
      );
     
      angles0 = Array(
      15
      , 
      60
      , 
      110
      , 
      180
      , 
      230
      , 
      260
      , 
      260
      , 
      310
      , 
      340
      );
     
      data1 = Array(
      80
      , 
      91
      , 
      66
      , 
      80
      , 
      92
      , 
      87
      );
     
      angles1 = Array(
      40
      , 
      65
      , 
      88
      , 
      110
      , 
      150
      , 
      200
      );
     
      // Create a PolarChart object of size 460 x 500 pixels, with a grey (e0e0e0)
     
      // background and 1 pixel 3D border
     
      c = cd.PolarChart(
      460
      , 
      500
      , 
      "0xe0e0e0"
      , 
      "0x000000"
      ,  
      1
      );
     
      // Set search path to current directory for loading icon images
     
      c.setSearchPath(GetPageContext());
     
      // Add a title to the chart at the top left corner using 15pts Arial Bold Italic
     
      // font. Use a wood pattern as the title background.
     
      c.addTitle(
      "Polar Line Chart Demo"
      , 
      "Arial Bold Italic"
      , 
      15
      ).setBackground(
     
      c.patternColor(
      "wood.png"
      ));
     
      // Set center of plot area at (230, 280) with radius 180 pixels, and white (ffffff)
     
      // background.
     
      c.setPlotArea(
      230
      , 
      280
      , 
      180
      , 
      "0xffffff"
      );
     
      // Set the grid style to circular grid, with grids below the chart layers
     
      c.setGridStyle(False, False);
     
      // Add a legend box at top-center of plot area (230, 35) using horizontal layout. Use
     
      // 10 pts Arial Bold font, with 1 pixel 3D border effect.
     
      b = c.addLegend(
      230
      , 
      35
      , False,  
      "Arial Bold"
      , 
      9
      );
     
      b.setAlignment(cd.TopCenter);
     
      b.setBackground(cd.Transparent, cd.Transparent, 
      1
      );
     
      // Set angular axis as 0 - 360, with a spoke every 30 units
     
      c.angularAxis().setLinearScale(
      0
      , 
      360
      , 
      30
      );
     
      // Add a blue (0xff) line layer to the chart using (data0, angle0)
     
      layer0 = c.addLineLayer(data0, 
      "0x0000ff"
      ,  
      "Close Loop Line"
      );
     
      layer0.setAngles(angles0);
     
      // Set the line width to 2 pixels
     
      layer0.setLineWidth(
      2
      );
     
      // Use 11 pixel triangle symbols for the data points
     
      layer0.setDataSymbol(cd.TriangleSymbol, 
      11
      );
     
      // Enable data label and set its format
     
      layer0.setDataLabelFormat(
      "({value},{angle})"
      );
     
      // Set the data label text box with light blue (0x9999ff) backgruond color and 1
     
      // pixel 3D border effect
     
      layer0.setDataLabelStyle().setBackground(
      "0x9999ff"
      , cd.Transparent, 
      1
      );
     
      // Add a red (0xff0000) line layer to the chart using (data1, angle1)
     
      layer1 = c.addLineLayer(data1, 
      "0xff0000"
      ,  
      "Open Loop Line"
      );
     
      layer1.setAngles(angles1);
     
      // Set the line width to 2 pixels
     
      layer1.setLineWidth(
      2
      );
     
      // Use 11 pixel diamond symbols for the data points
     
      layer1.setDataSymbol(cd.DiamondSymbol, 
      11
      );
     
      // Set the line to open loop
     
      layer1.setCloseLoop(False);
     
      // Enable data label and set its format
     
      layer1.setDataLabelFormat(
      "({value},{angle})"
      );
     
      // Set the data label text box with light red (0xff9999) backgruond color and 1 pixel
     
      // 3D border effect
     
      layer1.setDataLabelStyle().setBackground(
      "0xff9999"
      , cd.Transparent, 
      1
      );
     
      // Output the chart
     
      chart1URL = c.makeSession(GetPageContext(), 
      "chart1"
      );
     
      // Include tool tip for the chart
     
      imageMap1 = c.getHTMLImageMap(
      ""
      , 
      ""
      , 
      "title='[{dataSetName}] ({radius}, {angle})'"
      );
     
      </cfscript>
     
      <html>
     
      <body style=
      "margin:5px 0px 0px 5px"
      >
     
      <div style=
      "font-size:18pt; font-family:verdana; font-weight:bold"
      >
     
      Polar Line Chart
     
      </div>
     
      <hr style=
      "border:solid 1px #000080" 
      />
     
      <cfoutput>
     
      <div style=
      "font-size:9pt; font-family:verdana; margin-bottom:1.5em"
      >
     
      <a href=
      'viewsource.cfm?file=#CGI.SCRIPT_NAME#'
      >View Source Code</a>
     
      </div>
     
      <img src=
      "getchart.cfm?#chart1URL#" 
      usemap=
      "##map1" 
       border=
      "0" 
      />
     
      <map name=
      "map1"
      >#imageMap1#</map>
     
      </cfoutput>
     
      </body>
     
      </html>