Question

我有一个用例，我需要点击折线图（highcharts）。如果线图上没有任何点，那么我想在同一个线图中添加一个新点。为此我搜索了highcharts api，发现了两个可能对我有帮助的事件。这些是 chart.events.click 和 plotoptions.series.click 。只有当我点击空的绘图区域时才会触发chart.events.click。当我点击折线图上的任意位置时会触发plotoptions.series.click。

问题是在chart.events.click中传递了事件对象，它提供了 event.xAxis [0] .value 和 event.yAxis。值。这些值是我想要的实际坐标。在 plotoptions.series.click 中，传递的对象提供了各种值，如chartX chartY等。但这些不是我的折线图的实际坐标。简单来说，我需要plotoptions.series.click中的chart.events.click功能，但到目前为止还没有成功。我到目前为止所做的工作就在这里（从stackoverflow找到并编辑了一下）=＆gt; http://jsfiddle.net/sp3tsnaz/T5ZJ6/

    var flag = false;
function getIndex(x, data){
                    var index = 0,
                        dLen = data.length;
                    for(var i = 0; i < dLen; i++){
                        if(data[i] > x){
                            index = i;
                            i = dLen;
                        }
                    }
                    if(x == data[index]){
                        return -1;   
                    } else {
                        return index;   
                    }

                }

var func = function (e) {
                //alert(1);
                if (flag == false) {
                // find the clicked values and the series
                var x = e.xAxis[0].value,
                    y = e.yAxis[0].value,
                    series = this.series[0],
                    xIndex = getIndex(x, series.xData), //get 'index' 
                    data = series.options.data; //get original data


                if(xIndex > 0){ //add new point only when X-value is different 
                    data.splice(xIndex, 0, [x, y]);
                    series.setData(data);
                }



                flag = false;
            }
        };

$(function () {
    $('#container').highcharts({
        chart : {
            events: {
            click: func 
            }
        },

        plotOptions: {
            series: {
                cursor: 'pointer',
                events: {
                    /*click: function(event) {
                        flag = true;
                        func(event);
                        console.log(this.name +' clicked\n'+
                              'cx:' + event.chartX + '\n' +
                             'cy:' + event.chartY + '\n'+
                             'px:' + event.pageX + '\n' +
                             'py:' + event.pageY + '\n'+
                              'sx:' + event.point.x + "\t" + 'sy:' +event.point.y);
                    }*/
                }
            }
        },

        series: [{
            data: [[0,29.9] ,[1,71.5], [2,106.4], [3,129.2], [4,144.0], [5,176.0], [6,135.6], [7,148.5], [8,216.4], [9,194.1], [10,95.6], [11,54.4]]                
        }]
    });
});

我需要一个实现，我可以在其中单击折线图并添加一个“位于”现有曲线上的点。

三江源，

Highcharts单击折线图以添加点

0 个答案: