关于Highcharts图表组件动态修改属性的方法(API)总结之Series

简介: Highcharts图表组件内的Series很重要,如果说Categries是其大脑,那么Series就是其心脏。这两者才是Highcharts图表组件的重中之重啊。接下来就为大家介绍关于设置Series的相关方法。
Highcharts图表组件内的Series很重要,如果说Categries是其大脑,那么Series就是其心脏。这两者才是Highcharts图表组件的重中之重啊。接下来就为大家介绍关于设置Series的相关方法。

一、目录结构


二、API

1、addPoint(添加一个数据点)

参数

options:数据值(①可以是具体的一个Y轴数值,那么X轴坐标系统会随即分配一个;②可以设置一个数组,有着X和Y的数值,如:[xValue,yVlaue] 这样的形式;③可以设置一个Object(对象),详见 setData  API;

radraw:是否设置(true/false)默认为true;

shift:默认为为false;

animation:是否动画(默认为true);

代码示例

1. //完整参数
2. chart.series[0].addPoint(Math.random() * 100, truetrue,true);
3. //缺失参数
4. chart.series[0].addPoint(Math.random() * 100);


2、chart(仅仅获取Series相关的图表属性)

参数:无

返回:Object(对象)

代码示例

1. chart.series[0].chart;


3、data(仅仅获取某个Series相关的数据对象集合)

参数:无

返回:Object数组

代码示例

1. chart.series[0].data;


4、hide /show (隐藏或显示某个Series,换句话说,是某条线或者某个柱子)

参数:无

代码示例

01. // the button action
02. $button = $('#button');
03. $button.click(function() {
04. var series = chart.series[1];
05. if (series.visible) {
06. series.hide();
07. $button.html('显示红色线');
08. else {
09. series.show();
10. $button.html('隐藏红色线');
11. }
12. });


图片示例

show()显示

show()效果

hide()效果

hide()效果

5、name (获取某个Series的图例名称)

参数:无

返回:名称字符号串

代码示例

1. //获取第二个图例的名称
2. var name = chart.series[1].name


6、options(获取某个series的项目对象)

参数:无

返回:对象

代码示例

1. //获取某个series的options对象
2. var options = chart.series[0].options;
3.  
4. //获取options内的data数据
5. var data = options.data;


7、remove(删除某个series对象)

参数

redraw:移除某个series对象过后,是否需要重新绘制图表,默认为true;如果想移除过后,继续保留图表的坐标值不变化,可以设置为false即可;

代码示例

1. if (chart.series.length) {
2. //移除series[0]过后,不重新绘制图表
3. chart.series[0].remove(false);
4. }


图片示例

remove()前

remove()前效果

remove()后效果

remove()后效果

8、select(选择或者取消某个series,这个需要和plotOptions内series的showCheckbox=true属性设置配合使用)

参数

selected:true/false  默认可以不填写任何参数;不填写的时候,连续点击两次,图表会自动切换选择状态;

代码示例

①、设置图例有选择框

1. plotOptions: {
2. series: {
3. showCheckbox: true
4. }
5. }


②、选中某个series


1. chart.series[0].select(true);


③、取消选中某个series


1. chart.series[0].select(false);


图片示例

select()选中某个图例

选中某个图例

9、selected(获取某个series的选中状态)

参数:无

返回:true(选中)/false(未选中)

代码示例


1. chart.series[0].selected;


10、setData(设置某个series的数据)

参数

data:数据集合(array|array|array)均可

redraw:设置数据后是否重新画图表(true/false),默认为true,可以不设置此参数

代码示例


1. chart.series[0].setData([129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4] );


11、type(获取某条series数据展示图的类型)

参数:无

返回:string字符串(line、area等等)

代码示例

1. var sType = chart.series[0].type;


12、visible(设置某个series的显隐)

说明:等同于之前描述的show()和hide();

代码示例

1. //隐藏series[0]
2. chart.series[0].visible(false);


13、xAxis(获取与某个series相关联的横坐标xAxis的相关属性对象)

参数:无

代码示例

1. //获取series[0]的xAxis对象
2. var xAxis = chart.series[0].xAxis;
3.  
4. //获取xAxis的categories
5. var categories = xAxis.categories;


14、yAxis(获取与某个series相关联的纵坐标yAxis的相关属性对象)

参数:无

代码示例

1. //获取series[0]的yAxis对象
2. var yAxis = chart.series[0].yAxis;
3.  
4. //获取yAxis的max
5. var max= yAxis.max;
6.  
7. //其他属性依次类推




目录
相关文章
|
1天前
|
SQL Java 数据库连接
JDBC Java标准库提供的一些api(类+方法) 统一各种数据库提供的api
JDBC Java标准库提供的一些api(类+方法) 统一各种数据库提供的api
8 0
|
12天前
|
JSON 安全 API
【专栏】四种REST API身份验证方法:基本认证、OAuth、JSON Web Token(JWT)和API密钥
【4月更文挑战第28天】本文探讨了四种REST API身份验证方法:基本认证、OAuth、JSON Web Token(JWT)和API密钥。基本认证简单但不安全;OAuth适用于授权第三方应用;JWT提供安全的身份验证信息传递;API密钥适合内部使用。选择方法时需平衡安全性、用户体验和开发复杂性。
|
15天前
|
Java API PHP
邮件发送API的方法和步骤
邮件发送API能便捷地自动化发送邮件,提高效率。步骤包括:1. 选择如aoksend、Mailgun或Amazon SES等适合的API;2. 注册并获取API密钥;3. 设置发件人、收件人、主题和内容等参数;4. 根据API文档用Python等语言编写调用代码;5. 调用API发送邮件并处理结果;6. 根据返回信息判断发送是否成功。适用于大量邮件发送场景。
|
15天前
|
API 开发者
邮件API接口使用的方法和步骤
AOKSEND指南:了解和使用邮件API接口,包括选择适合的接口(如AOKSEND、Mailgun、SMTP),获取访问权限,配置发件人、收件人及邮件内容,调用接口发送邮件,并处理返回结果,以高效集成邮件功能。
|
16天前
|
API
邮箱API发送邮件调试的方法和步骤
AokSend指南:调试邮箱API发送邮件涉及确认调试目的、检查参数设置、接口调用、异常处理、日志记录及结果验证。确保参数正确,关注接口返回,记录日志以分析问题,处理异常情况,最终验证邮件发送成功与内容准确性。AokSend提供高效发信服务,支持SMTP/API接口,适用于大量验证码发送。
|
16天前
|
API 开发者
免费邮箱API发送邮件测试调试的方法和步骤
本文介绍了使用免费邮箱API如aoksend、Mailgun、SMTP2GO发送邮件的测试调试步骤:选择合适的API,获取访问密钥,配置邮件参数,编写测试代码,调试和测试,查看发送日志,以及优化改进邮件发送功能,确保其稳定运行。
|
17天前
|
API PHP 数据安全/隐私保护
IMAP邮箱API接收收取邮件的方法和步骤
IMAP邮箱API是用于自动接收和管理邮件的接口,允许程序无须手动登录即可操作邮件。要使用它,需先配置邮箱允许API访问,选择如Python的imaplib或PHP的imap扩展等IMAP库,然后连接到邮箱服务器,接收和处理邮件。处理完毕后断开连接。AokSend提供高效发信服务,支持SMTP/API接口。使用IMAP API能提升邮件管理效率。
|
17天前
|
API 网络安全 数据安全/隐私保护
SMTP邮件邮箱API发送邮件的方法和步骤
使用SMTP邮件邮箱API(如AokSend)发送邮件涉及6个步骤:获取SMTP服务器地址和端口,进行身份验证,构建邮件内容,连接到服务器,发送邮件及处理结果。例如,Gmail的SMTP服务器地址是smtp.gmail.com,端口587。此方法适用于程序化发送邮件,确保安全并支持大规模发信服务。
|
18天前
|
API Python
Relay邮件邮箱API发送邮件的方法和步骤
Relay邮件邮箱API是编程发送邮件的工具,允许用户通过代码实现邮件发送。发送步骤包括:获取API密钥、设置发件人和收件人信息、编写邮件内容,最后调用API发送。Python示例代码展示了如何使用API发送邮件,需替换API密钥和邮箱地址。
|
18天前
|
监控 API 开发工具
邮件中继中转邮箱API发送邮件的方法和步骤
AokSend介绍了使用邮件中继中转邮箱API发送邮件的步骤:理解API概念,获取API密钥,设置发件人和收件人信息,构建并发送API请求,处理响应,监控调试,及完善邮件功能。该服务支持大量验证码发送、触发式接口和高触达SMTP/API接口。选择合适提供商并参考文档可优化邮件发送。