Highcharts - 拖动 ColumRange答案

【问题标题】：Highcharts - Drag ColumRangeHighcharts - 拖动 ColumRange
【发布时间】：2016-08-22 20:38:08
【问题描述】：

您好，我的工作需要在 highcharts 上拖动 columnrange。我会用一个模式来解释，并给你一个例子。

目前我有一些列范围的图表（一项任务的持续时间作为时间的函数）

My Chart在此链接上，如果需要，您可以直接更新

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

2016 2017 2018 2019 2020 2021 2022

我需要这样的东西（箭头通常不可见）：

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

2016 2017 2018 2019 2020 2021 2022

如果你反转了，我需要拖动 xAxis 或 yAxis 上的整个列范围。

非常感谢您的帮助:)

如果你不想打开 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,
    }],




});

});

【问题讨论】：

标签： javascript jquery highcharts

【解决方案1】：

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

该示例显示了折线图和气泡图，但我不明白为什么它不能通过一些小的努力应用于柱形图和条形图。

【讨论】：

谢谢，但我找到了这个插件，但我不知道如何将它应用到 columnrange，因为我需要移动整个栏（x1 AND x2）或（y1 AND y2，如果你倒置）

【解决方案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
    }]

  });

});

当您的图表未倒置时，它会正常工作。如果你想为这个插件提供倒置的功能，你可以在这个插件的 github 上请求它： https://github.com/highcharts/draggable-points/issues

亲切的问候。

【讨论】：