Highcharts - 拖曳ColumRange

Question

您好我的工作我需要拖曳高栏上的列的范围。 我将用一个模式来解释并给你一个例子。

就目前我有一些columnranges（一个任务的持续时间随时间的函数）图

My Chart这个链接，如果你想

---

任务，你可以直接更新| - --------------- |

2016 2017年2018 2019 2020 2021 2022

---

我需要这样的事情（箭头是normaly不可见）：

任务---------> | - ---------------- |

2016 2017年2018 2019 2020 2021 2022

---

我需要拖动x轴或y轴的整个columnrange如果你已经反转。

非常感谢您的帮助:)

---

这里我的代码，如果你不想开jsfiddle.net：

$(function() { 

$('#container').highcharts({ 

    chart: { 
     type: 'columnrange', 
     inverted: true 
    }, 

    title: { 
     text: 'Roadmap' 
    }, 

    xAxis: { 
     categories: ['Task1', 'Task2', 'Task3', 'Task4', 'Task5', 'Task6', 'Task7', 'Task8', 'Task9', 'Task10', 'Task11', 'Task12'] 
    }, 

    yAxis: { 
     type: 'datetime', 
     minTickInterval: 365 * 24 * 36e5, 
     labels: { 
      align: 'left' 
     } 
    }, 



    plotOptions: { 
     columnrange: { 
     } 
    }, 


    legend: { 
     enabled: false 
    }, 

    tooltip: { 
formatter: function() { 
    return '<b>' + this.x + '</b> '; 
} 
}, 

    series: [{ 
     name: 'Dates ', 
     data: [ 
      [Date.UTC(2015,1,1), Date.UTC(2015,3,2)], 
      [Date.UTC(2014,4,8), Date.UTC(2015,7,8)], 
      [Date.UTC(2015,1,1), Date.UTC(2015,3,2)], 
      [Date.UTC(2018,4,8), Date.UTC(2019,7,8)], 
      [Date.UTC(2015,4,8), Date.UTC(2015,7,8)], 
      [Date.UTC(2015,1,1), Date.UTC(2015,3,2)], 
      [Date.UTC(2015,4,8), Date.UTC(2017,7,8)], 
      [Date.UTC(2015,4,8), Date.UTC(2015,7,8)], 
      [Date.UTC(2015,1,1), Date.UTC(2015,3,2)], 
      [Date.UTC(2015,1,1), Date.UTC(2015,3,2)], 
      [Date.UTC(2015,4,8), Date.UTC(2015,7,8)], 
      [Date.UTC(2015,1,1), Date.UTC(2015,3,2)], 
     ], 
     type: 'columnrange', 
     draggableY: true, 
    }], 




}); 

}); 

Answer 1

我发现了一个插件在Highcharts网站可能会对您有帮助：http://www.highcharts.com/plugin-registry/single/3/Draggable%20Points。

该示例显示了线条和气泡图表，但我不明白为什么它不能用于柱状图和条形图，只需稍加努力即可。

Answer 2

在你星盘的情况下，你可以使用拖动点的插件提供的Highcharts网站： http://www.highcharts.com/plugin-registry/single/3/Draggable%20Points

你可以改变这个插件一点点，如果你希望能够将其应用在columnrange/arearange。

我已经提供了小的改动这个插件，在这里你可以看到一个例子，如何能与columnrange一系列工作： http://jsfiddle.net/249e3gk6/10/

这张图的整个代码是在这里：

$('#container').highcharts({ 

    chart: { 
     type: 'columnrange' 
    }, 

    series: [{ 
     data: [ 
     [1, 2], 
     [1, 3], 
     [2, 5] 
     ], 
     cursor: 'move', 
     draggableY: true, 
     draggableX: true 
    }] 

    }); 

}); 

它当你的图表没有被倒置时，它会正常工作。如果你想有相反的functonality这个插件，你可以要求它在这个插件的github上： https://github.com/highcharts/draggable-points/issues

亲切的问候。