highchart的draggable-points.js依赖实现图表的动态拖拽操作
highchart的draggable-points.js依赖实现图表的动态拖拽操作
需求
- 实现一个曲线图,能够通过鼠标去拖拽点,来进行修改图表
实现
- 【highchart的draggable-points.js依赖实现图表的动态拖拽操作】例子基于vue来实现,如果是jq的按照官网的例子即可,配置列表链接.,例子
// 引入依赖 import Highcharts from 'highcharts/highcharts.js'; import draggable from 'highcharts/modules/draggable-points.js' // 注册拖拽事件 draggable(Highcharts); // 关键配置 plotOptions: { dragDrop: { draggableY: true, // 启用y轴拖拽 dragPrecisionY: 0.1 // 拖拽步长 }, point: { events: { // 拖拽过程事件 drag: function(event) { // console.log('拖动', event) }, // 拖拽结束事件 drop: function(evt) { } } }
总结
- vue中拖拽依赖引入,需要用hichart对象进行注册,其他的依赖也是同样的注册方式来使用
推荐阅读
- mysql的sql手工注入基于回显|mysql的sql手工注入基于回显,【靶场实战】入坑必须看的SQL注入部分解题指南
- python|python numpy pandas 书_numpy, pandas, matplotlib等常用库的学习手册
- Linux操作系统的学习|Linux 终端修改分辨率
- Linux操作系统的学习|Linux系统查看文件目录路径和切换目录命令大全
- Linux操作系统的学习|Ubuntu快速入门笔记
- 机器学习|用Matplotlib绘制事物的变化情况实例——折线图
- python|吴恩达机器学习笔记——踩了最多坑的Pycharm 导入numpy,pandas和matplotlib
- 机器学习|机器学习——Numpy、 Matplotlib、 Pandas的使用
- 如何使用|如何使用 SAP UI5 的标准控件结合 Cordova 插件调用手机摄像头进行条形码扫描试读版
- SAP|SAP UI5 barcode 控件的 feature 检查探测机制单步调试 - checkCordovaInIframe