FusionCharts创建气泡图和散点图(二)

Stella981
• 阅读 415

混合模式

此模式是自动模式和类别模式的组合。它允许x轴同时显示自动计算的x轴标签以及显式定义的x轴标签。

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

FusionCharts创建气泡图和散点图(二)

在上图中,您可以看到x轴显示自动计算的标签以及显式定义的标签。

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

  • 默认情况下,如果xAxisLabelMode未定义属性,并且未在数据中明确定义类别,则图表将在auto模式下显示x轴标签。

  • 如果定义了类别(未定义xAxisLabelMode属性),则图表将切换到categories模式。您也可以通过使用xAxisLabelMode属性显式定义模式来强制上述三种模式中的任何一种。

配置x轴垂直分割线

X轴垂直分隔线是贯穿图表中画布的垂直线。在气泡图的情况下,这些线很重要,因为它们将画布分为不同的部分。您可以根据需要配置这些行。

通过遵循以下几点来配置垂直分隔线:

  • 设置adjustDiv属性以显式设置此x轴的下限值和上限值以及分隔线的数量。默认情况下,这是自动完成的。将此属性设置0为禁用自动调整。要启用它,请将此属性设置为1。
  • 要显示沿x轴的分界线值,请将的值设置showXAxisValues为1。
  • 设置numVDivLines属性以指定要在图表上呈现的垂直轴分割线的数量。
  • 默认情况下,所有分隔线均显示其值。但是,请选择跳过使用xAxisValuesStep属性的每个第x(th)个分隔线值。

{ "chart": { "adjustVDiv": "1", "showXAxisValues": "1", "numVDivlines": "5", "xAxisValuesStep": "1" } }

  • 设置vDivlineColor属性以指定垂直分隔线的十六进制颜色代码。
  • 设置vDivlineThickness属性以指定垂直分割线的粗细。此属性采用介于1(最薄)和5(最厚)之间的值。
  • 设置vDivlineAlpha属性以指定垂直分隔线的透明度。此属性采用介于0(透明)和100(不透明)之间的值。
  • 要将垂直分隔线渲染为虚线,请将vDivlineIsDashedattribute 的值设置为1。此属性的默认值为0,它将呈现普通的分隔线。
  • 设置vDivlineDashLen属性以指定每个破折号的长度。
  • 设置vDivlineDashGap属性以指定每个破折号之间的间隔。

{ "chart": { "vDivlineColor": "ff0000", "vDivlineThickness": "2", "vDivlineAlpha": "70", "vDivlineIsDashed": "1", "vDivlineDashLen": "4", "vDivlineDashGap": "3" } }

  • 设置showAlternateVGridColor属性以指定垂直网格带的替代颜色。垂直网格的十六进制颜色代码在alternateVGridColor属性中指定。
  • 设置alternateVGridAlpha属性以指定备用垂直网格带的透明度。此属性采用介于0(透明)和100(不透明)之间的值。

请参考下面的代码:

{ "chart": { "showAlternateVGridColor": "1", "alternateVGridColor": "0ffff0", "alternateVGridAlpha": "40" } }

该图表如下图所示:

FusionCharts创建气泡图和散点图(二)

连接散点图由线

在散点图中,可以用一条线连接散点图。将drawLine属性设置为1,它将使用一条线连接数据点。此属性的默认值为0。此属性属于dataset对象。

请参阅下面给出的代码:

{ "chart": { "drawLine": "1" } }

通过一条线连接所有数据点的散点图如下所示:

FusionCharts创建气泡图和散点图(二)

绘制回归线

在散点图和气泡图中,每个数据点都有两个不同的数值:x轴的x值和y轴的y值。

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

对于散点图和气泡图,可以根据图表中提供的值绘制回归线。

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

要在图表中显示回归线,请将showRegressionLine属性设置为1。此属性的默认值为0,它会隐藏该行。此属性属于dataset对象。

请参阅下面给出的代码:

{ "chart": { ... }, "dataset": [{ "showRegressionLine": "1" }] }

带有回归线的散点图如下所示:

FusionCharts创建气泡图和散点图(二)

点赞
收藏
评论区
推荐文章
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
刚刚好 刚刚好
6个月前
css问题
1、在IOS中图片不显示(给图片加了圆角或者img没有父级)<div<imgsrc""/</divdiv{width:20px;height:20px;borderradius:20px;overflow:h
小森森 小森森
3天前
计划助手V1.0-微信小程序(QQ小程序)-源代码分享
疫情期间在家感觉好无聊啊,于是利用空闲时间做了一个用来记录和管理小目标时间的小程序,命名为《小沙漏》。QQ版本小程序同步上线,QQ小程序叫《时间小沙漏》,欢迎大家前来体验,后期也会添加其他的新功能哦【区别】:微信小程序的代码与QQ小程序的源码是不一样的。微信小程序的源码基于微信小程序云开发,需要在有网络的情况下使用,具有同步功能,所有记录在删除小
晴空闲云 晴空闲云
6个月前
css中box-sizing解放盒子实际宽高计算
我们知道传统的盒子模型,如果增加内边距padding和边框border,那么会撑大整个盒子,造成盒子的宽度不好计算,在实务中特别不方便。boxsizing可以设置盒模型的方式,可以很好的设置固定宽高的盒模型。盒子宽高计算假如我们设置如下盒子:宽度和高度均为200px,那么这会这个盒子实际的宽高就都是200px。但是当我们设置这个盒子的边框和内间距的时候,那
艾木酱 艾木酱
5个月前
快速入门|使用MemFire Cloud构建React Native应用程序
MemFireCloud是一款提供云数据库,用户可以创建云数据库,并对数据库进行管理,还可以对数据库进行备份操作。它还提供后端即服务,用户可以在1分钟内新建一个应用,使用自动生成的API和SDK,访问云数据库、对象存储、用户认证与授权等功能,可专
Wesley13 Wesley13
1年前
FLV文件格式
1.        FLV文件对齐方式FLV文件以大端对齐方式存放多字节整型。如存放数字无符号16位的数字300(0x012C),那么在FLV文件中存放的顺序是:|0x01|0x2C|。如果是无符号32位数字300(0x0000012C),那么在FLV文件中的存放顺序是:|0x00|0x00|0x00|0x01|0x2C。2.  
Stella981 Stella981
1年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Wesley13 Wesley13
1年前
00_设计模式之语言选择
设计模式之语言选择设计模式简介背景设计模式是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。设计模式(Designpattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的
helloworld_28799839 helloworld_28799839
6个月前
常用知识整理
Javascript判断对象是否为空jsObject.keys(myObject).length0经常使用的三元运算我们经常遇到处理表格列状态字段如status的时候可以用到vue
helloworld_34035044 helloworld_34035044
8个月前
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为