JavaScript图表工具FusionCharts入门教程(47)：放大散点图

---

FusionCharts Suite XT是全面的跨平台、跨浏览器JavaScript图表套包，其中包括FusionCharts XT、PowerCharts XT 、FusionWidgets XT、FusionMaps XT。支持 ASP、 ASP.NET、 PHP、 JSP、 ColdFusion、 Ruby on Rails、 JavaScript、甚至简单的HTML页面。它是你值得信赖的JavaScript图表解决方案，目前在全球有45万用户选择Fusioncharts来制作专业的JavaScript图表。

点击下载FusionCharts最新版

FusionCharts Suite XT缩放散点图是一种特殊的图表，它是散点图的扩展，具有缩放和平移功能，并由于这些功能而能够显示数百万个数据点。

缩放散点图主要用于查找数据集之间的相关性。图表中的相关性可以通过数据中的可视模式来确定。数据点的数量越多，相关的精度越高。在现代画布支持的浏览器（包括IE9 +）中，缩放散点图能够处理超过一百万个数据点。

创建缩放散点图

让我们创建一个图表，比较五个专业在20年内的录取率（百分比）与学位的平均年回报率（百分比）。

要创建缩放散点图，请执行以下步骤：

• 在JSON数据中，以"<attributeName>": "<value>"格式设置属性及其对应的值。
• 使用type属性指定图表类型。要渲染缩放散点图，请设置zoomscatter。
• 使用renderAt属性设置容器对象。
• 使用width和height属性指定图表的尺寸。
• 使用dataFormat属性设置要传递给图表对象的数据类型（JSON / XML）。

用于创建缩放散点图的一些属性是：

• id 属性设置数据图的唯一ID。
• x 属性指定数据图的x坐标。
• y 属性指定数据图的y坐标。

以上属性属于data对象（数据集对象的子对象）。

有关属性的详细列表，请参考缩放散点图的图表属性页面。
看一下下面显示的示例缩放散点图：

将光标拖到图表上以选择并放大数据点的子集。

在渲染时，将显示缩放散点图以及数据的宏观视图。要选择数据点的子集并放大它们，请将鼠标指针拖到数据点上。将绘制一个矩形以突出显示选定的数据点，并且将缩放该矩形内的所有点。

选择并放大数据图的子集后，所选部分将扩展以占据图表的整个宽度和高度。数据经过整齐的压缩，因此所有数据都适合图表的高度和宽度。为了更详细地分析数据，可以将选择和缩放过程重复几次，直到达到最后一个粒度级别为止。单击工具栏上的按钮，可以将图表恢复到其原始的宏观显示模式。 

对于在有限图表空间内呈现的大量数据，此图表可帮助您识别数据之间的相关性，并通过缩放和平移到数据中来进一步分析数据。

缩放散点图工具栏

缩放散点图工具栏是此图表用户的重要交互模式。下图所示的工具栏位于图表的右上角。

下表简要描述了缩放散点图工具栏上的按钮。 为了使变焦散点图，包括所提到的项目文件夹与.js文件的其余fusioncharts.zoomscatter.js这里。

由于性能方面的考虑，FusionCharts不包含用于为数据点定义外部URL的支持API，因此无法使缩放散点图中的锚点可点击。

现在，让我们看看如何在缩放散点图中绘制回归线。

绘制回归线

表示为直线的回归线用于显示x值的y值趋势或y值的x值趋势。因此，可以使用回归线从统计图画布中的分散数据点得出特定趋势，并据此预测值。例如，可以使用回归线找到趋势并预测未来的销售，股票价格，货币汇率，培训计划所带来的生产率提高等等。

有几种计算和绘制回归线的方法。缩放散点图使用线性回归，使用最小二乘方差法（也称为最小绝对偏差法）。此方法通过最小化每个数据点与直线的垂直偏差的平方和来计算观测数据的最佳拟合直线（如果点正好位于拟合线上，则其垂直偏差为0） 。由于先对偏差值求平方，然后求和，所以在正值和负值之间没有抵消。

要在缩放散点图中绘制回归线，请将showRegressionLine属性设置为1。此属性的默认值为0。
请参阅下面给出的代码：

{
  "chart": {
    ...
  },
  "dataset": [{
      "showRegressionLine" : "1"
  }]
}

带有回归线的缩放散点图如下所示： 回归模式

可以使用以下两种模式之一绘制回归线：

• y on X：（默认模式）时使用y值预测，或一种趋势y计算值的基础上，X值
• X on Y：在预测x值或基于y值计算x值趋势时使用

在上面所示的变焦散点图，其回归线绘制在?上X模式。

在这里，让我们尝试使用使用X on Y模式绘制的回归线的相同图表。用于设置模式和定制回归线的属性的简要描述为：

• 将showYonX属性设置为在Y模式下的X上0绘制回归线。此属性的默认值为，它在X模式下的Y中绘制回归线。此属性属于对象。1dataset
• 要设置绘制回归线所用的颜色，请指定regressionLineColor属性的十六进制颜色代码。
• 使用regressionLineThickness属性设置回归线的粗细。
• 使用regressionLineAlpha属性设置回归线的透明度。

该图表如下图所示：

下面给出了用于绘制两种模式的回归线的公式：

• Y on X：回归方程Y于X的形式为最佳拟合直线的方程Y = A + BX，其中X是解释变量和?是因变量和B =（NΣ（XY ）-（Σx）。（Σy））/（nΣx2–（Σx）2）。
• X on Y：回归方程X Y上的形式是最好的拟合直线的方程X = A +通过，其中?是解释变量和X是因变量和B =（NΣ（XY。 ）-（Σx）。（Σy））/（nΣy2–（Σy）2）。

---

想要购买FusionCharts Suite XT正版授权，或了解更多产品信息请点击