ComponentOne Wijmo: 实现钻取气泡图表

WijBubbleChart 图表是一款用气泡代替散点的图表类型，并且可以根据数据的大小自动转换气泡大小。通过图表我们可以使数据的展现更加的直观。同时，作为汇总类型的图表，加入数据钻取功能，查看更详细的子数据集功能是非常必要的。使用 Wijmo 图表的内置接口，我们可以轻松的实现数据钻取功能。本篇文章即将阐述如何实现气泡图表的数据钻取功能，先上效果图：<img alt="Wijmo 实现向下钻取图表功能" src="http://our.componentone.com/wp-content/uploads/2013/09/Bubble.gif">

发布于 2013/10/12 00:00

ComponentOne Enterprise

WijBubbleChart 图表是一款用气泡代替散点的图表类型，并且可以根据数据的大小自动转换气泡大小。通过图表我们可以使数据的展现更加的直观。同时，作为汇总类型的图表，加入数据钻取功能，查看更详细的子数据集功能是非常必要的。使用 Wijmo 图表的内置接口，我们可以轻松的实现数据钻取功能。

本篇文章即将阐述如何实现气泡图表的数据钻取功能，先上效果图：

WijBubbleChart 初始化

$("#wijbubblechart").wijbubblechart({
  horizontal: false,
  axis: {
  y: {
  text: "Total Hardware",
  annoFormatString: "p0"
  },
  x: {
  text: ""
 }
 },
 header: {
 text: "Hardware Distribution"
 },
 seriesList: seriesList,
 chartLabelFormatString: "p2",
 click: drawVersions
 });

实现向下钻取：

在上面的代码中，你会发下，我们调用了 Click 事件，调用的方法如下：

var drawBrands = function (e, data) {
$("#wijbubblechart").wijbubblechart("option", "click", drawVersions);
$("#wijbubblechart").wijbubblechart("option", "seriesList", seriesList);
}

那么，在查看了详细数据之后，我们需要回到主图表，需要通过以下代码实现：

var drawBrands = function (e, data) {
$("#wijbubblechart").wijbubblechart("option", "click", drawVersions);
$("#wijbubblechart").wijbubblechart("option", "seriesList", seriesList);
}

ComponentOne Enterprise | 下载试用

ComponentOne 是一套专注于企业 .NET开发、支持 .NET Core 平台，并完美集成于 Visual Studio 的第三方控件集，包含 300 多种 .NET开发控件，提供表格数据管理、数据可视化、报表和文档、日程安排、输入和编辑、导航和布局、系统提升工具等七大功能，被誉为“.NET开发的‘瑞士军刀’”。

ComponentOne 为您提供专业的产品咨询服务，并由技术支持工程师为您1对1解答。>> 发帖提问