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);
}

关于葡萄城

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