highcharts线性刻度或对数刻度按钮如何启用和放大或缩小整页 [英] How can highcharts linear scale or log scale button enabel and zoom in or out full page

问题描述

我创建了一个highchart，但是highchart中未启用某些功能.

I create a highchart but some functionality is not enable in highchart.

1. 线性比例按钮
2. 日志比例按钮
3. 缩放按钮(就像我单击缩放按钮时一样缩放，其全屏显示)

喜欢这张图片

此图片有3个庄园按钮.

This image has 3 manor buttons.

推荐答案

您可以通过导出按钮配置将其他按钮添加到图表中.要更改轴比例，请使用具有正确轴类型的更新方法.要应用全屏视图，您可以切换一些CSS类.

You can add additional buttons to your chart by exporting buttons configuration. To change axis scale, use update method with proper axis type. To apply full screen view, you can toggle some CSS class.

Highcharts.stockChart('container', {
    exporting: {
        buttons: {
            customButton: {
                text: 'Linear',
                onclick: function() {
                    this.yAxis[0].update({
                        type: 'linear'
                    });
                }
            },
            customButton2: {
                text: 'Logarithmic',
                onclick: function() {
                    this.yAxis[0].update({
                        type: 'logarithmic'
                    });
                }
            },
            customButton3: {
                text: 'Zoom',
                onclick: function() {
                    $('#container').toggleClass('modal');
                    this.reflow();
                }
            }
        }
    },
    rangeSelector: {
        inputPosition: {
            align: 'left'
        }
    },
    series: [{
        data: [1, 2, 4, 8, 16, 32, 64, 128, 256, 512]
    }]
});

实时演示: https://jsfiddle.net/BlackLabel/w5Laobgc/

API参考:

https://api.highcharts.com/class-reference/Highcharts.Axis#update

https://api.highcharts.com/highstock/exporting.buttons

这篇关于highcharts线性刻度或对数刻度按钮如何启用和放大或缩小整页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！