十三、jqPlot 散点图和气泡图
Abstract
在这一章中，我将讨论一类在表示数据分布时特别有用的图表。您可能会经常发现自己对一组数据如何沿两个不同参数定义的空间分布感兴趣，这两个参数沿 x 轴和 y 轴显示。这种数据分布可以暗示相关性或聚类。
在这一章中，我将讨论一类在表示数据分布时特别有用的图表。您可能会经常发现自己对一组数据如何沿两个不同参数定义的空间分布感兴趣，这两个参数沿 x 轴和 y 轴显示。这种数据分布可以暗示相关性或聚类。
散点图是显示数据分布的最佳选择，尤其是当需要分析大量数据时。因此，您将首先使用一个简单的示例来学习如何实现这种图表。随后，您将看到，一旦定义了两个不同的数据组(聚类)，就可以通过趋势线突出显示 x 和 y 变量之间的相关性。
最后，您将分析另外两种类型的图表:气泡图和块状图。这些可以被认为是散点图的变体，其中数据点被气泡或方块取代。当您需要用三个不同的参数来表示数据时，可以使用气泡图(散点图只适用于两个参数)；第三个参数由气泡的半径表示。方块图是一种特殊的散点图，在其中，您使用包含标签的方框来代替数据点。
散点图(xy 散点图)
乍一看，您可能认为散点图(也称为散点图或 xy 图)是一种点不相连的折线图，但这将是一个错误。事实上，散点图、气泡图和块状图都是一种特殊的图表。在散点图中，点由(x，y)对表示，但是您可以获得许多具有相同 x 值的点，这使得用线将它们连接起来既困难又不必要。折线图的目的是跟踪 x 值范围内 y 值的进度。散点图的目的是显示一组点，这些点可能有也可能没有某种关系(可以是非线性的)。此外，您可能希望分析这些点及其在(x，y)空间中的分布，例如，当它们分布在空间上独立的组中时。
您使用默认设置(如在折线图中)，禁用点之间的线。例如，让我们看两个(x，y)数据集合，它们可能呈现某种形式的关系，如清单 13-1 所示。
清单 13-1。ch13_04a.html
var data = [[400, 35], [402, 37], [650, 55], [653, 56], [650, 50],
[700, 55], [600, 37], [601, 43], [450, 38], [473, 37],
[480, 42], [417, 37], [510, 41], [553, 44], [570, 39],
[527, 41], [617, 41], [625, 49]];
var data2 = [[100, 40], [600, 80], [200, 50], [300, 55], [400, 60],
[500, 70], [123, 43], [110, 41], [157, 45], [160, 48],
[237, 49], [248, 55], [287, 50], [321, 59], [359, 52],
[387, 62], [466, 68], [533, 74], [344, 60], [323, 51],
[430, 65]];
与折线图不同，您输入的点没有任何顺序。如前所述，您使用默认设置，通过将showLine属性设置为“【T1””来禁用点之间的线(参见清单 13-2)。
清单 13-2。ch13_04a.html(使用'false'禁用点之间的线)
var options = {
title: 'Scatter Chart',
seriesDefaults: {
showLine: false,
showMarkers: true
}
};
$.jqplot('myChart', [data, data2], options);
这样你就得到图 13-1 中的散点图，其中两组数据覆盖了图表的两个不同区域。这些点被分成定义明确的组。
图 13-1。
A scatter chart
只有当两个数据集合被表示出来时，确定它们是否遵循线性或指数趋势才有意义。在这里，您可以使用 jqPlot 的趋势线功能。因此，您包括了趋势线插件:
<script type="text/javascript" src="../src/plugins/jqplot.trendline.min.js"></script>
或者，如果您更喜欢使用内容交付网络(CDN)服务，您可以按照以下方式进行:
<script type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.trendline.min.jsT2】
然后，激活两个系列的趋势线插件，给每条线分配不同的颜色(见清单 13-3)。
清单 13-3。ch13_04b.html
var options = {
title: 'Scatter Chart',
seriesDefaults: {
showLine: false,
showMarkers: true
} ,
series: [{
trendline: {
show: true,
color: '#0000ff',
type: 'exponential'
}
},{
trendline: {
show:true,
color: '#ff0000'
}
}]
};
结果，你得到一个散点图，有两个不同的序列，每个序列都有自己的趋势线，如图 13-2 所示。
图 13-2。
A scatter chart with trend lines
泡泡图
当您需要以三维方式显示数据时，可以使用气泡图。因此，每个实体由独立值的三元组(v1，v2，v3)表示。这些值中的两个通过绘制以(x，y)点为中心的圆盘来表示。第三个值由圆盘半径(r)表示。因此，(v1，v2，v3)三元组必须转换为(x，y，r)。三个(v1，v2，v3)值中的哪一个是半径，哪一个是 x 或 y 取决于图表设计者的技能。
与 xy 图表类似，气泡图通常用于确定所表示的数据之间的可能关系，甚至用于查看它们是否属于不同的组。这种方法在科学、医学和经济数据分析中很常见。
jqPlot 中有一个专门针对气泡图的插件:BubbleRenderer。因此，有必要在您的网页中包含这个插件:
<script type="text/javascript" src="../src/plugins/jqplot.bubbleRenderer.min.js"></script>
或者，如果您更喜欢使用 CDN 服务，您可以按如下方式操作:
<script type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.bubbleRenderer.min.jsT2】
输入数据数组每项有四个值:
[x, y, radius, <label or object>]
前两个值代表(x，y)坐标，第三个值(注意！)与气泡半径成正比，最后一个值代表引用标签(实际上也可以传递一个对象；稍后会有更多相关内容)。清单 13-4 定义了一个包含七个欧洲国家特征值的数组:作为 x 的值，你将插入表面积；对于 y，人口；半径代表经济价值。第四个值是报告州名的标签。
清单 13-4。ch13_01a.html
var data = [[301,60,29392,"Italy"], [675,65,34205,"France"],
[506,46,30625,"Spain"], [357,81,37896,"Germany"],
[450,9,37333,"Sweden"], [30,11,37736,"Belgium"],
[132,11,27624,"Greece"]];
现在，让我们分析如何设置options变量(见清单 13-5)。您需要激活seriesDefault对象中的 BubbleRenderer 插件，并将bubbleGradients属性设置为“true”。这将使“气泡”充满颜色渐变，给人一种深度感:这样圆盘看起来就像球体一样。正如您所看到的，对于这个插件，您不需要创建一个包含气泡标签的数组，然后将它显式分配给options中的一个对象；标签由相同的输入数据阵列自动读取。在options中指定的设置很少且简单。
清单 13-5。ch13_01a.html(设置options变量)
var options = {
title: 'Bubble Chart with Gradient Fills',
seriesDefaults:{
renderer: $.jqplot.BubbleRenderer,
rendererOptions: {
bubbleGradients: true
},
shadow: true
},
axes: {
xaxis: {
label: "Total area [*1000 km3]"
},
yaxis: {
label: "Population [million]"
}
}
};
$.jqplot('myChart', [data], options);
最后，通过这几行代码，你得到了如图 13-3 所示的精彩气泡图。
图 13-3。
A bubble chart
前面，我们提到了将一个对象作为输入数据数组中的第四个值进行传递的可能性。在这里，你可以详细地看到这涉及到什么。您可以同时传递一个对象，该对象允许您定义每个单独元素(气泡)的标签和颜色。使用前面的例子(见清单 13-5)，你可以附加不同于默认序列的颜色。例如，假设你想强调一个国家的价值高于其他国家。你拿瑞典为例，把它指定为红色。你给其他国家分配各种深浅不同的棕色。然后将瑞典的数据移到一个新的数组中，data2；这是为了确保“瑞典”气泡总是在前景中，并且不会被其他气泡覆盖(见清单 13-6)。
清单 13-6。ch13_02.html
var data = [[301, 60, 29392, {label: 'Italy',color:'#b39524'}],
[675, 65, 34205, {label: 'France', color:'#c39564'}],
[506, 46, 30625, {label: 'Spain',color:'#a39544'}],
[357, 81, 37896, {label: 'Germany', color:'#b39524'}],
[30, 11, 37736, {label: 'Belgium',color:'#c39544'}],
[132, 11, 27624, {label: 'Greece', color:'#a39564'}]];
var data2 = [[450, 9, 37333, {label: 'Sweden', color:'#ff2524'}]];
使用相同的options，你只需要修改jqplot()函数，如清单 13-7 所示。您采用这个小捷径，知道最右边的数组项是最后绘制的项，因此它会出现在前景中。
清单 13-7。ch13_02.html(修改jqplot()功能)
$.jqplot('myChart',[data,``data2T2】
图 13-4 给出了结果。
图 13-4。
A bubble chart with a selected state in the foreground
默认的颜色顺序很适合你，但是你决定将渐变填充改为透明效果。要做到这一点，你必须添加bubbleAlpha属性，并给它指定所需的透明度值，如清单 13-8 所示。
清单 13-8。ch13_01b.html
seriesDefaults:{
renderer: $.jqplot.BubbleRenderer,
rendererOptions: {
bubbleGradients: true,
bubbleAlpha: 0.6
},
shadow: true
},
图 13-5 显示了带有透明效果的渐变填充气泡，提供了底层气泡的一瞥。
图 13-5。
A bubble chart with transparency
方块图
块图(也称为块图)与气泡图非常相似，但它使用的不是圆盘，而是矩形。这里，矩形的大小没有任何意义，除了为那些将标签应用于给定(x，y)对的矩形提供空间。
与气泡图一样，有必要在网页中包含 BlockRenderer 插件:
<script type="text/javascript" src="../src/plugins/jqplot.blockRenderer.min.js"></script>
或者，如果您更喜欢使用 CDN 服务，您可以按如下方式操作:
<script type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.blockRenderer.min.jsT2】
在本例中，您将使用三组数据。输入数据数组应该具有以下格式:
[x, y, 'Label'],
现在，定义三个不同的数组，如清单 13-9 所示。
清单 13-9。ch13_03.html
var data1 = [[10, 30, 'Copper'], [100, 40, 'Gold'], [50, 50, 'Silver'],
[12, 78, 'Lead'], [44, 66, 'Brass']];
var data2 = [[68, 15, 'Maple'], [33, 22, 'Oak'],[10, 90, 'Ebony'],
[94, 30, 'Beech'],[70, 70, 'Ash']];
var data3 = [[22, 16, 'PVC'], [56, 76, 'PE'], [33, 78, 'PET'],
[27, 60, 'PC'], [70, 44, 'PU']];
在options中，你只需要激活seriesDefault对象中的 BlockRenderer 插件(见清单 13-10)。
清单 13-10。ch13_03.html(激活BlockRenderer插件)
var options = {
seriesDefaults:{
renderer: $.jqplot.BlockRenderer
}
};
$.jqplot ('myChart', [data1, data2, data3], options);
图 13-6 给出了您刚刚定义的框图，其中每个系列用不同的颜色标记。
图 13-6。
A block chart
摘要
在这一章中，你已经学会了如何表示一个分布。您可能会经常发现自己对研究数据在空间中的分布感兴趣，以便发现任何可能的趋势或聚类。根据您更想突出什么，您可以选择通过散点图、气泡图或方块图来表示数据。此外，您已经看到了如何突出一个分布的趋势。
在下一章中，我将收集其他类型的图表，这些图表您还没有看过，但是属于 jqPlot 库的标准类型。首先，您将学习漏斗图以及如何通过options设置其属性。然后，您将发现贝塞尔曲线——它们是什么，以及 jqPlot 如何实现它们。
版权属于：月萌API www.moonapi.com，转载请注明出处
