Question

我创建了一个图表，其中添加了图像。现在，当我单击此图像时，我想将yAxis max设置为特定点，当我再次单击它以将yAxis重置为原始值时。这是jsfiddle：http://jsfiddle.net/inadcod/TynwP/ 我已经设法添加图像，为图像添加一个点击事件，但它就像我得到的那样。任何人都可以帮我解决这个问题吗？谢谢！

Answer 1

有两种方法可以做你想做的事。

第一种方式：

问题在于无法更新图表选项，然后redraw更新图表选项，您必须destroy然后再次创建它，如下所示。

因此，为此您可以将图表options存储到var中，然后作为参数传递。

// inside options
    load: function() {
        this.renderer.image('http://inadcod.com/img/zoom.png', 70, 10, 28, 28)
        .on('click', function() {
            if(options.yAxis.max) {
                delete options.yAxis.max; // return to default
            } else {
                options.yAxis.max = 25;
            }
            chart = new Highcharts.Chart(options);                        
        })
        .css({
            cursor: 'pointer',
            position: 'relative',
            "margin-left": "-90px",
            opacity: 0.75
        }).attr({
            id: 'myImage',
            zIndex: -100
        }).add();
    }

Demo

第二种方式：

如果您只是更新redraw数据，则不会调用axis chart.yAxis[0].max = 25;，这就是我提出上述方法的原因但是，如果您设置chart.yAxis[0].isDisty = true;并致电chart.redraw();，它就会有效。你可以看到我的演示文件。

// inside chart options
    load: function() {
        this.renderer.image('http://inadcod.com/img/zoom.png', 70, 10, 28, 28)
        .on('click', function() {
            var axis = chart.yAxis[0];
            axis.max = 25;
            axis.isDirty = true;
            chart.redraw();
        })
        .css({
            cursor: 'pointer',
            position: 'relative',
            "margin-left": "-90px",
            opacity: 0.75
        }).attr({
            id: 'myImage', // your image id
            zIndex: -100
        }).add();
    }

Demo

Highcharts将图像添加到该图表，并附加一个onClick事件

1 个答案: