Question

我一直在看几个问题，但我找不到解决问题的方法。

我想做以下事情：

通过单击图表向所选系列添加一个点，并且应对该点进行排序在X轴上，所以线条向一个方向流动而不仅仅是添加它到了系列的最后。
通过双击删除系列中的一个点（但是当使用拖放扩展时这似乎非常困难）如果不可能，则使用按钮删除选定的点。
从任何系列拖放点。
添加和删除系列。

我在fiddler中做了几次测试，如果我分别完成这些测试，它们工作正常但是当我尝试将它们组合起来时就失败了。

    var currentIndexSelected;
var data;
data = [
    [1, 29.9],
    [2, 71.5],
    [3, 106.4],
    [4, 129.2],
    [5, 144.0],
    [6, 176.0],
    [7, 135.6],
    [8, 148.5],
    [9, 216.4],
    [10, 194.1],
    [11, 95.6],
    [12, 54.4]
];
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'spline',
        events: {
            click: function (e) {
                // find the clicked values and the series
                var x = e.xAxis[0].value,
                    y = e.yAxis[0].value,
                    series = this.series[0];

                // Add it
                series.addPoint([x, y]);
                // data.addPoint([x, y]);

            }
        }
    },
    xAxis: {

    },
    yAxis: {},
    legend: {
        layout: 'vertical',
        floating: true,
        backgroundColor: '#FFFFFF',
        align: 'right',
        verticalAlign: 'top',
        y: 60,
        x: -60
    },
    tooltip: {
        formatter: function () {
            return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + this.y;
        }
    },
    plotOptions: {},
    series: [{
        allowPointSelect: true,
        cursor: 'ns-resize',
        point: {
            events: {
                select: function () {
                    var pId = this.series.data.indexOf(this);
                    currentIndexSelected = pId;


                    $('#out').html(
                        'Dragging <b>' + this.series.points[pId].y); //this.series.data[0].x + '</b>, <b>');

                },

                drag: function (e) {

                    // Returning false stops the drag and drops. Example:
                    /*
                        if (e.newY > 300) {
                            this.y = 300;
                            return false;
                        }
                        */
                    $('#drag').html(
                        'Dragging <b>' + this.series.name + '</b>, <b>' + this.category + '</b> to <b>' + Highcharts.numberFormat(e.newY, 2) + '</b>');
                },
                drop: function () {
                    $('#drop').html(
                        'In <b>' + this.series.name + '</b>, <b>' + this.category + '</b> was set to <b>' + Highcharts.numberFormat(this.y, 2) + '</b>');
                }
            }
        },
        data: data,
        //data: [[1,29.9], [2,71.5],[3,106.4], [4,129.2], [5,144.0], [6,176.0], [7,135.6], [8,148.5], [9,216.4], [10,194.1], [11,95.6], [12,54.4]],
        draggableX: true,
        draggableY: true,

    }]
});




// button handler
$('#button1').click(function () {
    //this.point[currentIndexSelected].remove();
    var chart = $('#container').highcharts();
    if (chart.series.length == 1) {
        //chart.series[0].remove();
        chart.addSeries({
            data: [194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4],
            draggableX: true,
            draggableY: true
        });
    }




    var series = chart.getSelectedSeries();
    $('#out').html('length:' + series.length);

    data.splice(currentIndexSelected, 1);

    chart.series[1].setData(data);
    chart.redraw();

});

// button handler
$('#button2').click(function () {

    var series = chart.getSelectedSeries();


    data.splice(currentIndexSelected, 1);

    chart.series[0].setData(data);
    chart.xAxis[0].setCategories(categories);

});

动态Highcharts移动，添加和删除点和系列

0 个答案: