JavaScript图表工具FusionCharts入门教程(35)：气泡图和散点图（三）

气泡图和散点图用于绘制可以根据多个数字参数定义的数据。在这些图表中，x和y轴是数字。因此，数据点的位置指示两个不同的数值。

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

回归模式
可以以下列方式之一绘制回归线：

• X：（默认模式）当y值预测，或一种趋势y值进行计算，基于该X值
• X on Y：基于y值预测x值或计算x值趋势时

上面显示的带有回归线的散点图在X模式下使用Y。

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

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

请参考下面的代码：

{  "chart": {    "showYonX": "1",    "regressionLineColor": "ff0000",    "regressionLineThickness": "5",    "regressionLineAlpha": "70"  }}

使用X on Y模式绘制的具有回归线的同一图表如下所示：

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

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

绘制象限

将气泡/散点图的画布划分为多个象限可以使图表的分析更加容易。将drawQuadrantattribute 的值设置为1以绘制图表的象限。此属性的默认值为0。

请参阅下面给出的代码：

{  "chart": {    "drawQuadrant": "1"  }}

用象限呈现的气泡图如下所示：

请参阅下面给出的代码：

{  "chart": {    //Drawing quadrants on chart    "drawQuadrant": "1",    //Setting x quadrant value to 54    "quadrantXVal": "54",    //Setting y quadrant value to 12000    "quadrantYVal": "12000"  }}

在用户定义的位置绘制有象限的呈现的气泡图如下所示：
显示象限标签

在XY图表中，您还可以为所有单个象限设置标签。要在图表上添加标签，请遵循以下几点：

• 设置quadrantLabelTL属性以指定左上象限的标签。
• 设置quadrantLabelTR属性以指定右上象限的标签。
• 设置quadrantLabelBL属性以指定左下象限的标签。
• 设置quadrantLabelBR属性以指定右下象限的标签。

请参阅下面给出的代码：

{  "chart": {    "quadrantLabelTL": "Low Price / High Sale",    "quadrantLabelTR": "High Price / High Sale",    "quadrantLabelBL": "Low Price / Low Sale",    "quadrantLabelBR": "High Price / Low Sale"  }}

自定义标签象限

上图所示的象限标签可以根据用例进行定制。可以通过设置每个化妆品属性的属性来对其进行自定义。您可以自定义字体，字体颜色，透明度和字体大小。如果需要，还可以自定义标签边框和背景的化妆品。

我们将使用象限标签的某些外观属性来创建样本。请参阅下面给出的代码：

{  "chart": {    "quadrantLabelFontItalic": "1",    "quadrantLabelFontBold": "1",    "quadrantLabelTLFontColor": "#123456",    "quadrantLabelTRFontColor": "#ABCDEF",    "quadrantLabelBLFontColor": "#123ABC",    "quadrantLabelBRFontColor": "#DEF456"  }}

气泡图显示了象限标签的上述外观属性，如下所示：

• 使用下面给出的属性列表来自定义气泡图中的象限线：
• 设置quadrantLineThickness属性以指定象限线的粗细。
• 设置quadrantLineAlpha属性的值以指定0（透明）和100（不透明）之间象限线的透明度。
• 设置quadrantLineColor属性以指定象限线的十六进制颜色代码。
• 要将象限线渲染为虚线，请将quadrantLineIsDashed属性设置为1。
• 设置quadrantLineDashLen属性以指定每个破折 的长度。
• 设置quadrantLineDashGap属性以指定每个破折 之间的间隔。
• 设置quadrantLabelPadding属性以指定象限标签和相关象限线之间的间隔。

请参阅下面给出的代码：

{  "chart": {    "quadrantLineThickness": "2",    "quadrantLineAlpha": "30",    "quadrantLineColor": "#ac3d44",    "quadrantLineIsDashed": "1",    "quadrantLineDashLen": "2",    "quadrantLineDashGap": "3",    "quadrantLabelPadding": "5"  }}

使用自定义象限线呈现的气泡图如下所示：

想要购买FusionCharts Suite XT正版授权，或了解更多产品信息请点击【咨询在线客服】

标签：