JavaScript图表工具FusionCharts入门教程(46)：如何选择散点图

---

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最新版

选择散点图是一种特殊类型的图表，它允许用户从给定的数据点中直观地选择数据的子集。从本质上讲，它是XY绘图图（散点图）的扩展，具有增加的功能，可以选择图表上任意数量的点并将其返回到服务器或JavaScript函数进行进一步处理。

这可以用于多种用途，您希望用户从散布图中直观地选择数据。例如，我们将绘制一个选择的散点图，以显示在一周内在哈里的超级市场购买电视和手机的产品和所获得的价格。

要创建选择散点图，请遵循以下步骤：

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

有关属性的详细列表，请参阅选择散点图的图表属性页面。

这样创建的选择散点图如下所示：

选择点集

要选择一组点，可以在图表上拖动并绘制一个矩形。现在，此矩形内的所有点都是选定点。绘制矩形后，您可以调整其大小以调整更多点。调整大小处理程序使您可以这样做。

您可以分别拖动，调整大小或删除任何选择的矩形。要删除任何矩形，可以单击X选择框右上角的。

选择后，单击Submit按钮。此按钮将JSON / XML数据作为表单发送到服务器端脚本。在上面的示例中，所选点的JSON数据-每个电视/手机的价格和数量-已显示在表格中。单击Restore按钮将图表恢复到原始状态。

获取选定的数据在选择散点图中选择数据点的子集并单击之后Submit，选定的数据将发送到服务器端脚本或JavaScript函数，以进行进一步处理。在这里，您将看到如何使用同一页面上的JavaScript函数读取更新的数据。

呈现图表之后，要以数组形式访问图表数据，将调用以下函数：

//Get a reference to our chart
var chartObject= FusionCharts("chartId");

//Now get the data as array.
var arrData = chartObject.getData();

使用FusionCharts项目引用方法获取对图表对象的引用。接下来，要以数组形式获取数据，请调用getData()图表的方法。此方法以二维数组形式返回图表数据。

下面给出的是此数组的结构的简要说明：

现在，从该图表中，如果您从电视数据集中选择三个数据点，从手机数据集中选择五个数据点，然后使用getData()图表对象的方法将图表数据作为数组返回，则返回的数组的表格映射可以为跟踪如下：

然后映射到JSON数据，得到：

• 每个数据集作为数组中的一行返回
• 每行的第一列包含数据集索引
• 其余的列包含该数据集的选定点的ID
• 每行数组的长度（水平）可以不同，具体取决于为该数据集选择的数据点数

从图表读取JSON数据

该图表还提供了一种以JSON / XML格式读取所选数据的方法。此方法名为getJSONData()，可以按以下方式调用：

//Get a reference to our chart
var chartObject= FusionCharts("SelectChart");

//Get the data from chart
var jsonRtn = chartObject.getJSONData();

//Show it to user in alert box
alert(jsonRtn);

该函数getJSONData()返回所选数据。此功能还用于从图表中检索完整的数据。要从图表中获取完整的数据，您需要将其false作为参数传递给函数。例如，var jsonRtn = chartObject.getJSONData(false);

配置为显示如何检索和更新所选数据的选择散点图如下所示：

现在，让我们在选择散点图中自定义绘图回归线的外观和属性。

绘制回归线

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

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

要显示回归线，请将showRegressionLine属性设置为1。将其设置为0（默认）将隐藏回归线。

请参阅下面给出的代码：

{
    "chart": {
        "showRegressionLine": "1"
    }
}

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

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

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

在上面所示的选择散点图，回归线被绘制在?上X模式。

使用X on Y模式绘制的回归线相同的样本如下所示。要设置模式并定制回归线，请执行以下步骤：

• 设置showYOnX属性以1指定绘制回归线的方式。
• 使用regressionLineColor属性指定回归线的十六进制颜色代码。
• 使用regressionLineThickness属性设置回归线的粗细。
• 使用regressionLineAlpha属性设置回归线的透明度（0到100之间）。

请参阅下面给出的代码：

{
    "chart": {
        "showYOnX": "0",
        "regressionLineColor": "f4cb00",
        "regressionLineThickness": "3",
        "regressionLineAlpha": "70"
    }
}

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

> Y on X：X上的Y的回归方程是形式为y = a + bx的最佳拟合直线方程，其中x是解释变量，y是因变量，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正版授权，或了解更多产品信息请点击