highchart的draggable-points.js依赖实现图表的动态拖拽操作

110 阅读 0 评论 73 点赞

我是靠谱客的博主笑点低纸鹤，最近开发中收集的这篇文章主要介绍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) {
	        }
	    }
	}