Highchart的折线图总是显示一个点的原因

2023-11-02 07:59

本文主要是介绍Highchart的折线图总是显示一个点的原因,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1.首先,看看这一小段 highchart配置:

var chart = Highcharts.chart('container', {title: {text: '图表变换'},subtitle: {text: '普通的'},xAxis: {categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']},series: [{type: 'spline',colorByPoint: true,data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],showInLegend: false}]
});

 生成:

对,就是散点的,为什么散点呢?

2.再看到series的data:

 3.这里的series数组是一维的,所以每一项数据都是独立的,相对的说,如果数据是同一组的话是这样的:

series: [{name: '安装,实施人员',data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]}, {name: '工人',data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]}, {name: '销售',data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]}, {name: '项目开发',data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]}, {name: '其他',data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]}]

可以看到,这里的series有多个object{ name:'' , data: [] } ,而series[0].data[0] 和 series[1].data[0] 是一组数据,以此类推,如果chart的type是spline(折线图类型),那么会自动连接chen成线而不是变成scatter(散点图)了。

4.值得注意的是,在实时刷新的折线图生成中,如果不只是一条线的时候,要注意这个属性:

chart.addPoint([x, y], false, true);

看看官网的addPoint用法:

可以知道,当shift属性为true时,且如果一开始series长度只有1,也就是一个data,那么每次实时更新的时候,就会导致只有一个点的更新了 ,虽然这时候shift可以设置为false,但是这样的话,实时更新的时候每个点都会加进图表导致它越来越臃肿。

解决办法:初始化series的时候先push一个为0的data。

这样的话,实时刷新的图就会一直存在两个点,且会自动连接成线而不是变成散点图了。

 

这篇关于Highchart的折线图总是显示一个点的原因的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/329217

相关文章

java.sql.SQLTransientConnectionException连接超时异常原因及解决方案

《java.sql.SQLTransientConnectionException连接超时异常原因及解决方案》:本文主要介绍java.sql.SQLTransientConnectionExcep... 目录一、引言二、异常信息分析三、可能的原因3.1 连接池配置不合理3.2 数据库负载过高3.3 连接泄漏

深度剖析SpringBoot日志性能提升的原因与解决

《深度剖析SpringBoot日志性能提升的原因与解决》日志记录本该是辅助工具,却为何成了性能瓶颈,SpringBoot如何用代码彻底破解日志导致的高延迟问题,感兴趣的小伙伴可以跟随小编一起学习一下... 目录前言第一章:日志性能陷阱的底层原理1.1 日志级别的“双刃剑”效应1.2 同步日志的“吞吐量杀手”

Java.lang.InterruptedException被中止异常的原因及解决方案

《Java.lang.InterruptedException被中止异常的原因及解决方案》Java.lang.InterruptedException是线程被中断时抛出的异常,用于协作停止执行,常见于... 目录报错问题报错原因解决方法Java.lang.InterruptedException 是 Jav

解决1093 - You can‘t specify target table报错问题及原因分析

《解决1093-Youcan‘tspecifytargettable报错问题及原因分析》MySQL1093错误因UPDATE/DELETE语句的FROM子句直接引用目标表或嵌套子查询导致,... 目录报js错原因分析具体原因解决办法方法一:使用临时表方法二:使用JOIN方法三:使用EXISTS示例总结报错原

Windows环境下解决Matplotlib中文字体显示问题的详细教程

《Windows环境下解决Matplotlib中文字体显示问题的详细教程》本文详细介绍了在Windows下解决Matplotlib中文显示问题的方法,包括安装字体、更新缓存、配置文件设置及编码調整,并... 目录引言问题分析解决方案详解1. 检查系统已安装字体2. 手动添加中文字体(以SimHei为例)步骤

SpringSecurity显示用户账号已被锁定的原因及解决方案

《SpringSecurity显示用户账号已被锁定的原因及解决方案》SpringSecurity中用户账号被锁定问题源于UserDetails接口方法返回值错误,解决方案是修正isAccountNon... 目录SpringSecurity显示用户账号已被锁定的解决方案1.问题出现前的工作2.问题出现原因各

javax.net.ssl.SSLHandshakeException:异常原因及解决方案

《javax.net.ssl.SSLHandshakeException:异常原因及解决方案》javax.net.ssl.SSLHandshakeException是一个SSL握手异常,通常在建立SS... 目录报错原因在程序中绕过服务器的安全验证注意点最后多说一句报错原因一般出现这种问题是因为目标服务器

MyBatis Plus 中 update_time 字段自动填充失效的原因分析及解决方案(最新整理)

《MyBatisPlus中update_time字段自动填充失效的原因分析及解决方案(最新整理)》在使用MyBatisPlus时,通常我们会在数据库表中设置create_time和update... 目录前言一、问题现象二、原因分析三、总结:常见原因与解决方法对照表四、推荐写法前言在使用 MyBATis

RedisTemplate默认序列化方式显示中文乱码的解决

《RedisTemplate默认序列化方式显示中文乱码的解决》本文主要介绍了SpringDataRedis默认使用JdkSerializationRedisSerializer导致数据乱码,文中通过示... 目录1. 问题原因2. 解决方案3. 配置类示例4. 配置说明5. 使用示例6. 验证存储结果7.

IDEA中Maven Dependencies出现红色波浪线的原因及解决方法

《IDEA中MavenDependencies出现红色波浪线的原因及解决方法》在使用IntelliJIDEA开发Java项目时,尤其是基于Maven的项目,您可能会遇到MavenDependenci... 目录一、问题概述二、解决步骤2.1 检查 Maven 配置2.2 更新 Maven 项目2.3 清理本