Thingworx-图表-Bubble Chart气泡图使用

气泡图是一种多变量图表，是散点图的变体，通常用于比较和展示不同类别圆点（气泡）之间的关系，通过气泡的位置以及面积大小。从整体上看，气泡图可用于分析数据之间的相关性。Thingworx的Mashup中自带有气泡图的控件，可以快速方便的将数据展示出来。

1.新建DataShape

此处气泡图的数据需要使用InfoTable，任何时候使用InfoTable都需要DataShape来定义字段。其实ThingWorx中的许多数据结构需要一个DataShape来格式化它们的值。

新建DataShape,名称自定义，此处取“TestDataShape”，定义3个字段：“XValue”、“YValue"、“BubbleValue”,数据类型都是Number。

2.利用DataShape创建InfoTable 

新建一个Thing，命名为TestThing，模板选择Generic Thing。新建一个Service，命名为BubbleChart，Base Type选择INFOTABLE，Data Shape选择刚建的TestDataShape。

 

在 Snippets处选择函数“Create Infotable from datashape”,同样选择刚建的“TestDataShape”，插入代码段如下：

var params = {
	infoTableName : "InfoTable",
	dataShapeName : "TestDataShape"
};

var result = Resources["InfoTableFunctions"].CreateInfoTableFromDataShape(params);

 目前就成功创建了一个InfoTable，但目前是空的，接下来我们需要向其中插入几条数据：

var entry1={
    XValue:"1",
    YValue:"6.6",
    BubbleValue:"6.6"
}
var entry2={
    XValue:"4",
    YValue:"7.8",
    BubbleValue:"7.8"
}
var entry3={
    XValue:"6",
    YValue:"9.0",
    BubbleValue:"9.0"
}
var entry4={
    XValue:"9",
    YValue:"5.1",
    BubbleValue:"5.1"
}
var entry5={
    XValue:"11",
    YValue:"4.7",
    BubbleValue:"4.7"
}
result.AddRow(entry1);
result.AddRow(entry2);
result.AddRow(entry3);
result.AddRow(entry4);
result.AddRow(entry5);

3.创建Mashup,显示气泡图

新建Mashup,命名为BubbleChart，从Widgets中找到Bubble Chart控件拖曳至中间，绑定刚写的Service。在Bubble Chart控件属性编辑区域选择X,Y和Bubble的匹配值，如下：

 

 

保存Mashup,预览效果如下：