C1PieChart饼形图控件绘制环形图

ASP.NET Wijmo的PieChart控件可以绘制饼形图,饼形图将每个系列绘制成一个数据片段,并包含定制和动画。本文介绍了通过对InnerRadius属性的设置,把C1PieChart转变为一个环形图。添加C1PieChart控件到页面。设置C1PieChart加载页面,便可以得到如下的环形图。打开附件的Demo,可以得到详细信息。<p><a href="http://www.grapecity.com.cn/image.ashx?picture=C1PieChart1.gif"><img style="display: inline;" title="C1PieChart1" src="http://www.grapecity.com.cn/image.ashx?picture=C1PieChart1_thumb.gif" alt="C1PieChart1" width="621" height="405" /></a></p>

发布于 2014/06/13 00:00

ComponentOne Enterprise

ASP.NET Wijmo的PieChart控件可以绘制饼形图,饼形图将每个系列绘制成一个数据片段,并包含定制和动画。

本文介绍了通过对InnerRadius属性的设置,把C1PieChart转变为一个环形图。

添加C1PieChart控件到页面。

设置C1PieChart

通过C1PieChart.ShowChartLables设置是否显示标签。

通过C1PieChart.Radius设置饼形图的半径。

通过C1PieChart.InnerRadius设置为合法值,将C1PieChart转变为一个环形图,环形图的内半径由InnerRadius控制。

以上设置的代码可以参考如下:

<wijmo:C1PieChart runat = "server" ID="C1PieChart1" Radius="140" ShowChartLabels="false" 
Height="475" Width = "756" CssClass ="ui-widget ui-widget-content ui-corner-all" 
InnerRadius="40">

 

通过C1PieChart的Hint设置是否显示提示信息以及如何显示提示信息,包含提示信息的动画效果、显示方式、延迟等。参考如下代码,在网页加载后鼠标Hover在环形图的某个数据片段上,都会显示提示信息。

<Hint>
    <Content Function="hintContent" />
</Hint>

通过C1PieChart的Legend设置图表的图例。其中包含Legend.Text设置图例的文字,LegendStyle设置图例的样式。参考代码如下:

<Legend Text="May 2009 - May 2010"></Legend>

 

绘制数据片段

创建不同PieChartSeries系列,将这些系列绘制成数据片段并进行定制。

使用PieChartSeries的Data设置各个数据片段的数据值。

使用PieChartSeries的HintContent设置提示信息的内容。

使用PieChartSeries的Offset设置数据片段离中心点的偏移值。

最后将所有的系列都添加到PieChart的SeriesList里。

<SeriesList> 
    <wijmo:PieChartSeries Label="DX11GPU & WIN7" Data="5.6" Offset="30"></wijmo:PieChartSeries>
    <wijmo:PieChartSeries Label="iMac" Data="23.18"></wijmo:PieChartSeries>
    <wijmo:PieChartSeries Label="DX10GPU & WIN7" Data="56.36"></wijmo:PieChartSeries>
    <wijmo:PieChartSeries Label="DX10/11GPU & XP" Data="16.67"></wijmo:PieChartSeries>
    <wijmo:PieChartSeries Label="DX9 SM2b & 3.0" Data="11.77"></wijmo:PieChartSeries>
    <wijmo:PieChartSeries Label="DX9 SM 2 GPU" Data="4.34"></wijmo:PieChartSeries>
    <wijmo:PieChartSeries Label="DX8 GPU & BELOW" Data="5.13"></wijmo:PieChartSeries>
</SeriesList>

 

加载页面,便可以得到如下的环形图。打开附件的Demo,可以得到详细信息。

C1PieChart1

本文Demo的源代码如下:

C1PieChart-donut.7z (3.85 mb)

关于葡萄城

葡萄城软件是专业的软件开发技术和低代码平台提供商,以“赋能开发者”为使命,致力于通过表格控件、低代码和BI等各类软件开发工具和服务,一站式满足开发者需求,帮助企业提升开发效率并创新开发模式。葡萄城开发技术始于1980年,40余年来始终聚焦软件开发技术,有深厚的技术积累和丰富的产品线。是业界能够同时赋能软件开发和低代码开发的企业。凭借过硬的产品能力、活跃的用户社区和丰富的伙伴生态,与超过3000家合作伙伴紧密合作,产品广泛应用于信息和软件服务、制造、交通运输、建筑、金融、能源、教育、公共管理等支柱产业。

相关产品
推荐相关案例
关注微信
葡萄城社区二维码

关注“葡萄城社区”

活字格低代码二维码

关注“活字格低代码”

想了解更多信息,请联系我们, 随时掌握技术资源和产品动态