如何使用C1BubbleChart创建一个简单的气泡图

ASP.NET Wijmo的C1BubbleChart控件可以创建气泡图,方便的展示三维数据。本文就介绍如何创建一个简单的气泡图,在本文的Demo中有实现的详细代码。加载页面后创建的气泡图效果图如下:<p><a href="http://www.grapecity.com.cn/image.ashx?picture=C1BubbleChart.png"><img style="background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border: 0px;" title="C1BubbleChart" src="http://www.grapecity.com.cn/image.ashx?picture=C1BubbleChart_thumb.png" alt="C1BubbleChart" width="740" height="457" border="0" /></a></p>

发布于 2014/06/13 00:00

ComponentOne Enterprise

ASP.NET Wijmo的C1BubbleChart控件可以创建气泡图,方便的展示三维数据。本文就介绍如何创建一个简单的气泡图,在本文的Demo中有实现的详细代码。

在页面添加C1BubbleChart控件。

设置C1BubbleChart

通过C1BubbleChart.ChartLabel设置气泡图标签的样式,比如字体大小、文字格式,位置等。

通过C1BubbleChart.Aimation设置是否显示动画以及动画延迟等。代码如下。

<Animation Duration="500" Easing="EaseOutElastic"></Animation>

 

通过C1BubbleChart.Hint设置是否显示提示信息以及如何显示提示信息,包含提示信息的动画效果、显示方式、延迟等。

C1BubbleChart展示三维数据

给C1BubbleChart添加系列,创建BubbleChartSeries并通过C1BubbleChart.SeriesList添加系列。通过X、Y、Y1的Values添加三维数据。BubbleChartSeries.Label用来设置系列标签。

<serieslist>
    <wijmo:bubblechartseries label="西部">
        <data>
            <x>
	        <values>
		    <wijmo:chartxdata doublevalue="5" />
		    <wijmo:chartxdata doublevalue="14" />
		    <wijmo:chartxdata doublevalue="20" />
		    <wijmo:chartxdata doublevalue="18" />
		    <wijmo:chartxdata doublevalue="22" />
		</values>
	    </x>
            <y>
		<values>
		    <wijmo:chartydata doublevalue="5500" />
		    <wijmo:chartydata doublevalue="12200" />
		    <wijmo:chartydata doublevalue="60000" />
		    <wijmo:chartydata doublevalue="24400" />
		    <wijmo:chartydata doublevalue="32000" />
		    </values>
	    </y>
	    <y1 doublevalues="3,12,33,10,42">
		    <values>
		    <wijmo:charty1data doublevalue="3">/>
		    <wijmo:charty1data doublevalue="12">/>
		    <wijmo:charty1data doublevalue="33">/>
		    <wijmo:charty1data doublevalue="10">/>
		    <wijmo:charty1data doublevalue="42">/>
		    </values>
            </y1>
        </data>
    </wijmo:bubblechartseries>
</serieslist>

加载页面后创建的气泡图效果图如下:

C1BubbleChart

 

本文Demo的源代码如下:

C1BubbleChart-overview.7z (3.85 mb)

关于葡萄城

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

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

关注“葡萄城社区”

活字格低代码二维码

关注“活字格低代码”

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