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

親切的問候。