← 返回所有博客文章

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

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

Bubble

WijBubbleChart 初始化

  1: $("#wijbubblechart").wijbubblechart({
  2:    horizontal: false,
  3:    axis: {
  4:       y: {
  5:           text: "Total Hardware",
  6:           annoFormatString: "p0"
  7:       },
  8:       x: {
  9:           text: ""
 10:       }
 11:    },
 12:    header: {
 13:        text: "Hardware Distribution"
 14:    },
 15:    seriesList: seriesList,
 16:    chartLabelFormatString: "p2",
 17:    click: drawVersions
 18: });

 

实现向下钻取:

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

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

 

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

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

 

Demo 下载: 点击下载