HighCharts——自定义重绘处理程序缩放

Question

我试图在HighCharts中制作一个列图，每当图表调整大小或缩放时，都可以正确地重新定位注释。

http://jsfiddle.net/2tJ3G/

你可以看到我在图表周围调整框架的大小是什么意思。注释留在它们应该在的地方。

这个问题只出现在这个重绘函数从缩放调用时。图表会重新加载。我已经成功地为重绘事件提供了一个函数，但是这完全破坏了选择缩放(它只显示所有数据)。这是我的处理器:

function drawIt() {
    var optionsTmp = options;  
    chart = new Highcharts.Chart(optionsTmp, function(chart) {
    var text, box, point;
    var count = 0;
    for (var annotX in annots) {
        var annot = annots[annotX];
        if (annot.length > 0) {
           //draw rectangles / text with annot vals
        }
        count++;
    }
});
options = optionsTmp;
}

有可能我没有正确地通过变焦(options.xAxis.min)的新极端，但试图将其传递给处理程序并没有给我太多的运气。

任何想法?

Answer 1

问题是，您正试图删除图表，并创建一个新的-这是不可能的，只是通过设置空容器-您还需要销毁图表。但这仍然是不可能的破坏图表，而重绘-它会导致错误。

我认为你应该尝试另一种解决方案，例如更新注释。这里做了类似的事情，为点添加了额外的行，参见:http://www.highcharts.com/jsbin/oyadep/4/edit#javascript,live

当然，它还没有完成，但放大后效果很好。

function drawPaths(options) {
var maxNum = 2;

//add the paths
group_init = options.renderer.g().add();
// console.log(options);
for (i = 0; i < maxNum; i++) {
    $.each(options.series[i].data, function(i2, point) {
        var xpos = options.xAxis[0].translate(this.x);
        var ypos = options.yAxis[0].translate(this.y, false, true);
        var gr = this.y; //gross revenue
        var p_gr = 0; //for tests
        var eq; //equation
        var my;
        //console.log(this);
        eq = gr + 1; //equation
        my = options.yAxis[0].translate(eq, false, true);
        //console.log(xpos, ypos, my);
        options.renderer.path(['M', xpos + 105, ypos + 5, 'L', xpos + 105, my + 5]).attr({
            'stroke-width': 1,
            stroke: '#ad2b2b'
        }).add(group_init);
    });
}
}

Answer 2

长话短说，我的setExtremes函数(在完全重绘图表之前调用)正在破坏下面的重绘函数。我必须在那里设置阈值，并提前静音。

            setExtremes: function(e) {
                doZoom = true; 
                min= e.min; 
                max = e.max;
                e.preventDefault();
                e.stopPropagation();
            }

纠正小提琴:

http://jsfiddle.net/9LgUf/1/