关于highcharts:highchart的draggablepointsjs依赖实现图表的动态拖拽操作

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

需要

  1. 实现一个曲线图,可能通过鼠标去拖拽点,来进行批改图表

    实现

  2. 例子基于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) {
             }
         }
     }

    总结

  3. vue中拖拽依赖引入,须要用hichart对象进行注册,其余的依赖也是同样的注册形式来应用

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理