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

相关文章

CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)

《CSS模拟html的title属性(鼠标悬浮显示提示文字效果)》:本文主要介绍了如何使用CSS模拟HTML的title属性,通过鼠标悬浮显示提示文字效果,通过设置`.tipBox`和`.tipBox.tipContent`的样式,实现了提示内容的隐藏和显示,详细内容请阅读本文,希望能对你有所帮助... 效

IDEA编译报错“java: 常量字符串过长”的原因及解决方法

《IDEA编译报错“java:常量字符串过长”的原因及解决方法》今天在开发过程中,由于尝试将一个文件的Base64字符串设置为常量,结果导致IDEA编译的时候出现了如下报错java:常量字符串过长,... 目录一、问题描述二、问题原因2.1 理论角度2.2 源码角度三、解决方案解决方案①:StringBui

部署Vue项目到服务器后404错误的原因及解决方案

《部署Vue项目到服务器后404错误的原因及解决方案》文章介绍了Vue项目部署步骤以及404错误的解决方案,部署步骤包括构建项目、上传文件、配置Web服务器、重启Nginx和访问域名,404错误通常是... 目录一、vue项目部署步骤二、404错误原因及解决方案错误场景原因分析解决方案一、Vue项目部署步骤

pip install jupyterlab失败的原因问题及探索

《pipinstalljupyterlab失败的原因问题及探索》在学习Yolo模型时,尝试安装JupyterLab但遇到错误,错误提示缺少Rust和Cargo编译环境,因为pywinpty包需要它... 目录背景问题解决方案总结背景最近在学习Yolo模型,然后其中要下载jupyter(有点LSVmu像一个

SpringBoot中的404错误:原因、影响及解决策略

《SpringBoot中的404错误:原因、影响及解决策略》本文详细介绍了SpringBoot中404错误的出现原因、影响以及处理策略,404错误常见于URL路径错误、控制器配置问题、静态资源配置错误... 目录Spring Boot中的404错误:原因、影响及处理策略404错误的出现原因1. URL路径错

在Rust中要用Struct和Enum组织数据的原因解析

《在Rust中要用Struct和Enum组织数据的原因解析》在Rust中,Struct和Enum是组织数据的核心工具,Struct用于将相关字段封装为单一实体,便于管理和扩展,Enum用于明确定义所有... 目录为什么在Rust中要用Struct和Enum组织数据?一、使用struct组织数据:将相关字段绑

Linux内存泄露的原因排查和解决方案(内存管理方法)

《Linux内存泄露的原因排查和解决方案(内存管理方法)》文章主要介绍了运维团队在Linux处理LB服务内存暴涨、内存报警问题的过程,从发现问题、排查原因到制定解决方案,并从中学习了Linux内存管理... 目录一、问题二、排查过程三、解决方案四、内存管理方法1)linux内存寻址2)Linux分页机制3)

Vue项目中Element UI组件未注册的问题原因及解决方法

《Vue项目中ElementUI组件未注册的问题原因及解决方法》在Vue项目中使用ElementUI组件库时,开发者可能会遇到一些常见问题,例如组件未正确注册导致的警告或错误,本文将详细探讨这些问题... 目录引言一、问题背景1.1 错误信息分析1.2 问题原因二、解决方法2.1 全局引入 Element

如何设置vim永久显示行号

《如何设置vim永久显示行号》在Linux环境下,vim默认不显示行号,这在程序编译出错时定位错误语句非常不便,通过修改vim配置文件vimrc,可以在每次打开vim时永久显示行号... 目录设置vim永久显示行号1.临时显示行号2.永www.chinasem.cn久显示行号总结设置vim永久显示行号在li

MySQL不使用子查询的原因及优化案例

《MySQL不使用子查询的原因及优化案例》对于mysql,不推荐使用子查询,效率太差,执行子查询时,MYSQL需要创建临时表,查询完毕后再删除这些临时表,所以,子查询的速度会受到一定的影响,本文给大家... 目录不推荐使用子查询和JOIN的原因解决方案优化案例案例1:查询所有有库存的商品信息案例2:使用EX