彩票走势图

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

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

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

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

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

点击下载FusionCharts最新版

散点图

散点图用于绘制根据两个数字参数定义的数据。散点图是多系列图表,但其数据格式与常规多系列图表略有不同。

JavaScript图表工具FusionCharts入门教程(32):气泡图和散点图(一)
标题(也称为图表标题)是图表的标题,您可以为标题添加自定义文本,以及配置其字体属性和外观。
  • 可添加字幕 。
  • 字体属性和标题修饰也可以使用属性进行自定义。
  • 您还可以自定义标题的对齐方式。
让我们创建一个散点图,用两个数值绘制-日平均温度(在x轴上绘制,啤酒和冰淇淋的销售量(美元)在y轴上绘制);该图表显示温度如何影响啤酒和冰淇淋的销售收入。

要创建散点图,请遵循以下步骤:

  • 在JSON数据中,以"": ""格式设置属性及其对应的值。
  • 使用type属性指定图表类型。要渲染散点图,请设置scatter。
  • 使用renderAt属性设置容器对象。
  • 使用width和height属性指定图表的尺寸。
  • 使用dataFormat属性设置要传递给图表对象的数据类型(JSON / XML)。
JavaScript图表工具FusionCharts入门教程(32):气泡图和散点图(一)
泡泡图表
气泡图用于绘制根据三个数字参数定义的数据。第三个数字参数由气泡的直径表示。气泡图的JSON / XML格式与散点图略有不同,这是因为气泡图会绘制一个附加的数字参数。
气泡图
JavaScript图表工具FusionCharts入门教程(32):气泡图和散点图(一)
标题(也称为图表标题)是图表的标题。您可以为标题添加自定义文本,以及配置其字体属性和外观。
  • 可添加字幕 。
  • 字体属性和标题修饰也可以使用属性进行自定义。
  • 您还可以自定义标题的对齐方式。
因此,让我们创建一个气泡图,显示上个月针对Harry's SuperMart的不同品牌的鞋子的销售分析。使用type属性指定图表类型。要渲染气泡图,请设置bubble。

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

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

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

显示在泡沫值标签

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

请参阅下面给出的代码:

{
  "chart": {
    "showValues": "1"
  }
}
带有在气泡上呈现的数据标签的气泡图如下所示:
JavaScript图表工具FusionCharts入门教程(32):气泡图和散点图(一)

将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轴分段的气泡图如下所示:
JavaScript图表工具FusionCharts入门教程(32):气泡图和散点图(一)

配置X轴标签

您可以为气泡图和散点图配置x轴标签的显示模式。您可以选择使图表自动生成x轴标签以及垂直分隔线,也可以显式定义每个x轴标签。此外,您还可以选择混合使用这两种模式。

要配置x轴标签,请设置xAxisLabelMode属性以指定呈现x轴标签的模式。此属性采用三个值:
  • 自动(默认)
  • 分类目录
  • 混合

自动模式

在自动模式下,图表会自动计算并显示x轴标签。在这种模式下,图表将忽略categories对象数组,并允许x轴继承类似于垂直y轴的属性。

具有在自动模式下呈现的x轴标签的气泡图如下所示:

JavaScript图表工具FusionCharts入门教程(32):气泡图和散点图(一)

在上图中,您可以看到x轴标签是自动计算并显示的。这些x轴标签基于x轴值,而x轴值又是使用x图表数据的值生成的。此外,与每个标签一起,还绘制了垂直分隔线。

类别模式

在此模式下,x轴显示由对象category数组内的categories数组对象明确定义的标签。

在类别模式下呈现的带有x轴标签的气泡图如下所示:
JavaScript图表工具FusionCharts入门教程(32):气泡图和散点图(一)

在上图中,您可以看到显示了在category对象数组内的categories对象数组中显式定义的标签。不显示自动计算的标签。

要在类别中呈现x轴标签,请将xAxisLabelMode属性的值设置为CATEGORIES。

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


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关产品
FusionCharts Suite XT

全面的跨平台、跨浏览器JavaScript图表解决方案套包,拥有100+图表和2000+地图

FusionCharts XT

50万用户首选的跨平台、跨浏览器的JavaScript/HTML图表解决方案

FusionWidgets XT

FusionWidgets XT操作简单,提供各种实时图表、金融图表、支持图表自动更新

PowerCharts XT

适用于专业领域的高级图表控件

FusionMaps XT

功能强大的JavaScript (HTML5)地图工具,可以根据内容、地区来展现及描绘地理数据或者其它实体。

扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP