- 博客(18)
- 收藏
- 关注
原创 Highchart获取csv数据
需求:获取html中的csv数据 在单独的 y轴 上应该有 2 个系列可见。折线图应显示温度图表。使用 SVGRenderer 添加一个按钮,该按钮将负责在华氏度和摄氏度之间更改温度单位。分析:题目要求获取csv数据,需要两个Y轴,折线图显示温度,在左上角画一个按钮实现温度切换。
2024-01-03 17:14:11
342
1
原创 HighCharts 地图画航线,以及在城市点画圈
分析:生成一幅世界地图需导入相关地图js文件与获取json文件,在城市点画一个响应式的圈和一条指示性的航线,需要生成序列,并指定类型,航线类型(flowmap) ,响应式的圆圈用render进行画圆圈,具体请看下图。加载所需的文件highmaps.js、map.js,tiledwebmap.js、flowmap.js。需要注意的是,上述示例只是一个简单的示范,实际使用时需要根据具体的数据和需求进行适当的调整和扩展。需求:生成一个世界地图,在城市点处画一个响应式的圈 ,及在城市点间画一条指示性的航线。
2023-12-28 17:08:36
443
1
原创 HighCharts 地图
需要注意的是,上述示例只是一个简单的示范,实际使用时需要根据具体的数据和需求进行适当的调整和扩展。Highcharts提供了丰富的配置选项,也可以参考Highcharts官方文档来了解更多细节和API用法。希望这些信息对大家有所帮助!要使用 Higcharts 最快学会的方法,就是拿着官网给我们的例子,加以分析和修改。在数据列(series)中修改地图其中某个地方颜色(color)在地图左下角添加None按钮,点击按钮恢复地图默认设置。加载所需的文件highmaps.js、map.js。
2023-12-26 16:40:38
437
1
原创 HighCharts 股票图自定义股票功能
分析: 基本图表转换股票图表使用Highcharts.stockChart转换,自定义库存tockTools基本元素在<style>标签里设置图片背景,具体请看下图。Highcharts提供了丰富的配置选项,也可以参考Highcharts官方文档来了解更多细节和API用法。需要注意的是,上述示例只是一个简单的示范,实际使用时需要根据具体的数据和需求进行适当的调整和扩展。要使用 Higcharts 最快学会的方法,就是拿着官网给我们的例子,加以分析和修改。需求:将基本图表转换为股票图表,自定义库存元素。
2023-12-22 16:58:34
470
原创 HighCharts 基础股票图
分析: 基本图表转换股票图表使用Highcharts.stockChart转换,修改库存基本元素stockTools解决定位菜单标题使用相关属性设定具体请看下图。需求:将基本图表转换为股票图表。修改库存的基本元素。注意范围的位置选择器、按钮数量、内容、初始选择和外观。同时定位菜单和标题。要使用 Higcharts 最快学会的方法,就是拿着官网给我们的例子,加以分析和修改。首先将基本图表转换为股票图Highcharts.stockChart。添加rangeSelector----范围选择器进行自定义设置。
2023-12-20 17:13:03
463
1
原创 HighCharts 以轴标签为标签+蓝色圆圈跟随鼠标移动
分析: 调用load事件,使用renderer画个圆圈跟随鼠标,点击图标保存点用click事件,在click事件里使用renderer画一个圆和标签,标签以轴为单位。需求: 画一个蓝色圆圈跟随鼠标移动,点击图表并保存这个点,点的右侧有以轴标签为标签的标签。要使用 Higcharts 最快学会的方法,就是拿着官网给我们的例子,加以分析和修改。调用load事件,使用document.addEventListener监听鼠标。点击图表保存点使用click事件,获取点击点坐标。使用renderer写标签及画圆。
2023-12-18 17:09:59
402
原创 HighCharts 画个圈跟随鼠标移动,单击时保存数据,标签为坐标轴
分析: 先给圆圈单独一个容器div,然后设置圆的各个属性(位置、宽度。),接着在图标设置属性里将跟随鼠标移动属性(enableMouseTracking)打开,单击保存数据使用点击事件。需要注意的是,上述示例只是一个简单的示范,实际使用时需要根据具体的数据和需求进行适当的调整和扩展。单击时保存它,保存的点旁边应该有一个标签,坐标为轴单位。要使用 Higcharts 最快学会的方法,就是拿着官网给我们的例子,加以分析和修改。希望这些信息对大家有所帮助!设置圆圈的属性,并写出跟随圆圈跟随鼠标方法。
2023-12-14 13:37:08
80
1
原创 HighCharts 迷你图+线图隐藏数据点
需求: 创建 4 个最小的图表,仅显示系列而没有其他图表元素 ,有些图表选项是通用的,有些是单独的,还要考虑工具提示的格式和行为 所有内容都应显示在小图表中,饼图的格式应不同,隐藏数据点使用marker属性进行关闭即可。分析:首先先设置图表的容器、全局属性 Highcharts.setOptions({})接着创建四个图表,然后饼图的格式不同进行单独设置,最后进行css设置。需要注意的是,上述示例只是一个简单的示范,实际使用时需要根据具体的数据和需求进行适当的调整和扩展。希望这些信息对大家有所帮助!
2023-12-12 13:22:39
264
原创 HighCharts 混合图设置全局选项+柱状图设置y轴动态最大刻度
分析: 混合图设置全局选项首先用Highcharts.setOptions() 方法,使用该方法预定义颜色、任务命令中提到的符号以及所有其他图表选项,找出最大值用图表的 load 事件找出最大值,并设置y轴动态最大刻度。需要注意的是,上述示例只是一个简单的示范,实际使用时需要根据具体的数据和需求进行适当的调整和扩展。要使用 Higcharts 最快学会的方法,就是拿着官网给我们的例子,加以分析和修改。需求:混合图设置全局选项,柱状图找出最大值,设置y轴动态最大刻度(最大值*2)希望这些信息对大家有所帮助!
2023-12-08 14:09:49
317
原创 HighCharts 直方图与散点图多轴绘制,多轴不同步修改刻度
分析: 绘制直方图需要引入histogram-bellcurve.js文件,并设置图表类型为histogram(直方图),散点图只需设置图表类型为scatter即可实现,多轴不同步进行修改刻度在轴属性里用alignTicks(同步修改轴刻度)进行设置。需要注意的是,上述示例只是一个简单的示范,实际使用时需要根据具体的数据和需求进行适当的调整和扩展。在数据列中用(xAxis:/yAxis:)指定相关轴并指定直方图散点图图表属性。需求: 直方图与散点图绘制并可选择柱子,柱状图某一列柱子的高亮显示。
2023-12-06 13:42:47
98
1
原创 HighCharts 面积图图表图案填充
分析: 首先需要引入填充图表的js文件(pattern-fill.js),然后在选项设置(plotOptions)里进行设置fillColor. Pattern.path里进行设置,接着数据列也进行设置,具体设置请看源码。transform="translate(x,y)": 加了描边后需要平移(x=stroke-width/2, y=stroke-width/2)A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y):弧线。
2023-12-04 14:24:33
92
1
原创 HighCharts 极地图图表绘制及添加标示线+柱状图找最值
分析:图表加上标示线在需要的轴上面用plotLines(标示线)属性来进行添加,极地图则是在chart(图表)属性里开启polar(极)属性然后进行绘制,找出最值需要在plotOptions属性里进行修改。它可单独定义在x轴或y轴,也可以同时定义在x轴和y轴,而极地图里圆圈标示线属于y轴。层叠,标示线在图表中显示的层叠级别,值越大,显示越向前,默认标示线显示在数据线之后。需求: 绘制极地图并给极地图图表加上标示线,在柱状图中找出最值。标示线的文字标签,用来描述标示线。标示线的事件,详细事件下文详解。
2023-12-01 14:17:16
319
1
原创 HighCharts扇形图+流图的批注
分析:饼图包含扇形图,就是将饼图修改起始角度来改变图形使用startAngle (圆环的开始角度)endAngle (圆环的结束角度),而流图则需引入streamgraph.js(图表类型)以及annotations.js(批注)文件进行生成修改。2)在再(plotOptions-pie)里面使用startAngle (圆环的开始角度)endAngle (圆环的结束角度)1)首先引入streamgraph.js(图表类型)以及annotations.js(批注)文件。1)首先定义一个饼图(pie)
2023-11-29 14:31:41
83
1
原创 HighCharts 修改版权标识+面积图堆叠及断裂
分析: 修改版权标识用credits来进行修改,生成堆叠面积图和堆叠柱状图一样只需用在plotOptions {area}stacking属性就可以完成,而断裂要在series(数据列)中的data里填写null(空值)实现,并不是填0。credits: //设置右下角的标记。href: 'http://www.xoyo.com', //路径。2)在数据列中的data(数据)中填写null(空值)text: "xoyo.com", //显示的文字。//enabled: true, //是否显示。
2023-11-27 13:03:56
54
1
原创 HighCharts 对数折线图+可变宽度的柱形图
分析: 生成对数折线图在轴上使用type: 'logarithmic'属性即可生成,tickInterval(刻度线的间隔(以轴为单位),在对数轴上,tickInterval 基于幂),可变宽度的柱状图需先导入variwide.js文件,然后在图表类型type中填写type: 'variwide'来进行改变。2)设置图表类型type:variwide补充数据生成可变宽度的柱状图。需求:生成一个对数折线图和一个能根据数据改变x轴方向宽度的柱状图。1)添加两轴(X轴:xAxis,Y轴:yAxis)
2023-11-23 10:59:59
610
原创 HighCharts 嵌套图表+生成角锥柱状图及每列柱子变不同颜色
分析: 可以通过 pointPadding 和 pointPlacement 控制柱子位置,生成角锥柱状图可以导入highcharts-more.js文件来修改,从全局看用colorByPoint改变每一列数据颜色,这是我本人粗劣的解读,大家可以在仔细的查看查看。我们可以看到在数据列里面添加一个colorByPoint: true属性就可以实现每列柱子颜色不一样,不用自己修改颜色,改变颜色更简便,使用pointPadding,pointPlacement来改变柱子的位置。
2023-11-21 14:59:45
353
原创 HighChart坐标轴标签旋转及刻度线调整+格式化小数点
1、 配置柱状图(column)的包装对象类型(plotOptions)1) 添加labels(标签)tickWidth(刻度宽度)tickLength(刻度长度)tickColor(刻度颜色)2) 在labels(标签)里添加rotation(旋转)来进行刻度标签旋转3) 自定义需要的值2、 用数值格式化进行保留小数点操作1){point.y:.1f}保留一位小数2){point.y:.2f}保留两位小数3){point.y:.0f}不保留小数。
2023-11-18 16:46:44
516
1
原创 HighCharts隐藏不需要的导出按钮+图例位置更改显示
1)图例项的布局layout属性默认值为水平(horizontal),还可更改为垂直(vertical)开发过程中遇到如下一个需求,用户只需要显示需要的导出按钮,隐藏其他功能键及图例可以自由更改位置。Highcharts导出栏菜单隐藏功能和图例位置更改功能,以柱状图为例,介绍实现方法。1、添加一个导出功能模块(exporting)然后分三步。2)自定义按钮功能(contextButton)3)自定义填写需要的菜单项(menuItems)1)添加一个导出按钮buttons。2)aligin决定水平方向位置。
2023-11-16 14:52:49
224
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人