首页 文章

Highcharts - Drag ColumRange

提问于
浏览 次
0

您好我的工作我需要在highcharts上拖动列范围 . 我将用模式解释并给你一个例子 .

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

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

2 回答

  • 0

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

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

    回复于
  • 0

    如果是您的图表，您可以使用Highcharts网站上提供的draggable-points插件：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

    亲切的问候 .

    回复于

相关问题