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

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

翻译|使用教程|编辑：杨鹏连|2020-08-20 09:41:25.817|阅读 220 次

概述：气泡图和散点图用于绘制可以根据多个数字参数定义的数据。在这些图表中，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轴上绘制）；该图表显示温度如何影响啤酒和冰淇淋的销售收入。

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

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

泡泡图表
气泡图用于绘制根据三个数字参数定义的数据。第三个数字参数由气泡的直径表示。气泡图的JSON / XML格式与散点图略有不同，这是因为气泡图会绘制一个附加的数字参数。
气泡图

标题（也称为图表标题）是图表的标题。您可以为标题添加自定义文本，以及配置其字体属性和外观。

可添加字幕。
字体属性和标题修饰也可以使用属性进行自定义。
您还可以自定义标题的对齐方式。

因此，让我们创建一个气泡图，显示上个月针对Harry's SuperMart的不同品牌的鞋子的销售分析。使用type属性指定图表类型。要渲染气泡图，请设置bubble。

有关属性的详细列表，请参见气泡图的图表属性页面。

上述代码的气泡图如下所示：

对于气泡图和散点图，类别是可选的，因为x轴是数字。但是，可以使用类别为x刻度上的任何位置定义自定义的x轴标签。
类别可以定义x轴的数字或非数字标签。与其他每个数据集包含的数据数组中的对象数量与类别数量相同的其他多系列图表不同，散点图和气泡图在每个数据集数组下的数据数组元素中可以具有不同数量的对象。
如果未定义类别，则x轴显示自动计算的数字刻度，其中垂直分隔线和分隔线的值作为x轴标签。
但是，您也可以显式定义您选择的类别，并仅将这些类别显示为x轴标签。此外，您还可以使用混合模式将类别和自动生成的x轴标签组合在一起。所有这些都将在本节中进行解释。

显示在泡沫值标签

默认情况下，数据标签不呈现在气泡图中的气泡上。要在图表中显示气泡的各个标签，请将showValues属性设置为1。

请参阅下面给出的代码：

{
  "chart": {
    "showValues": "1"
  }
}

带有在气泡上呈现的数据标签的气泡图如下所示：

将x轴分割为分类区域

可以使用垂直趋势线将气泡/散点图的x轴细分为分类区域。要设置分类区域，请执行以下步骤：

设置isTrendZone属性以显示趋势区而不是线。
设置startValue属性以指定趋势区的起始值。
设置endValue属性以指定趋势区的结束值。
color在line对象中设置属性以指定趋势区的颜色。
alpha在line对象中设置属性以指定趋势区的透明度。

请参考下面的代码：

{
    "chart": {
        ...
    },
    "data": {
        ...
    },
    "vtrendlines": [{
        "line": [{
                "startValue": "0",
                "endValue": "20",
                "isTrendZone": "1",
                "color": "#adebff",
                "alpha": "25"
            },
            {
                "startValue": "20",
                "endValue": "40",
                "isTrendZone": "1",
                "color": "#adebff",
                "alpha": "15"
            },
            {
                "startValue": "40",
                "endValue": "60",
                "isTrendZone": "1"
            },
            {
                "startValue": "60",
                "endValue": "80",
                "isTrendZone": "1",
                "color": "#f2a485",
                "alpha": "25"
            },
            {
                "startValue": "80",
                "endValue": "100",
                "isTrendZone": "1",
                "color": "#f2a485",
                "alpha": "15"
            }
        ]
    }]
}

X轴分段的气泡图如下所示：