Question

我正在尝试在HighCharts中创建一个柱形图，其注释可以在图表调整大小或缩放时正确重新定位。

你可以通过调整图表周围的框架来了解我的意思。注释保留在应有的位置。

只有从缩放调用此重绘功能时才会出现问题..图表只是重新加载。我已经成功地为重绘事件提供了一个函数，但这完全打破了select-zoom（它只显示所有数据）。这是我的处理程序：

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/

HighCharts - 自定义重绘处理程序borks缩放？

2 个答案: