JavaScript图表工具FusionCharts入门教程(35)：气泡图和散点图（三）-控件新闻-慧都网

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

翻译|使用教程|编辑：杨鹏连|2020-09-02 10:02:22.247|阅读 151 次

概述：气泡图和散点图用于绘制可以根据多个数字参数定义的数据。在这些图表中，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：（默认模式）当ý值预测，或一种趋势ý值进行计算，基于该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模式绘制的具有回归线的同一图表如下所示：

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

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

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

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

绘制象限

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

请参阅下面给出的代码：

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

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

用象限渲染的气泡图也可以在用户定义的位置绘制。要指定垂直和水平象限线的位置，请分别将值设置为quadrantXVal和quadrantYVal属性。这些属性的值应在其相应的相对轴（而不是像素）的范围内。

请参阅下面给出的代码：

{
  "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"
  }
}

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