Question

如何始终隐藏高图中的重置缩放按钮。我有自定义按钮可放大和缩小。如何始终隐藏高图中的重置缩放按钮。我有自定义按钮用于放大和缩小。如何在高位图中始终隐藏重置缩放按钮。我有自定义按钮用于放大和缩小。如何在高位图中始终隐藏重置缩放按钮。我有自定义按钮可放大和缩小。 $（function（）{ / ** * Highcharts插件，用于在图表外部的单独容器中显示工具提示 *边界框，以便它可以利用页面中的所有可用空间。 * /

(function(H) {
    H.wrap(H.Tooltip.prototype, 'getLabel', function(proceed) {

        var chart = this.chart,
            options = this.options,
            chartRenderer = chart.renderer,
            box;

        if (!this.label) {

            this.renderer = new H.Renderer(document.body, 400, 500);
            box = this.renderer.boxWrapper;
            box.css({
                position: 'absolute',
                top: '-9999px'
            });
            chart.renderer = this.renderer;
            proceed.call(this, chart, options);
            chart.renderer = chartRenderer;

            this.label.attr({
                x: 0,
                y: 0
            });
            this.label.xSetter = function(value) {
                box.element.style.left = value + 'px';
            };
            this.label.ySetter = function(value) {
                box.element.style.top = value + 'px';
            };
        }
        return this.label;
    });

    H.wrap(H.Tooltip.prototype, 'getPosition', function(proceed, boxWidth, boxHeight, point) {
        var chart = this.chart,
            chartWidth = chart.chartWidth,
            chartHeight = chart.chartHeight,
            pos;
        point.plotX += this.chart.pointer.chartPosition.left;
        point.plotY += this.chart.pointer.chartPosition.top;

        // Temporary set the chart size to the full document, so that the tooltip positioner picks it up
        chart.chartWidth = $(document).width();
        chart.chartHeight = $(document).height();

        // Compute the tooltip position
        pos = proceed.call(this, boxWidth, boxHeight, point);

        // Reset chart size
        chart.chartWidth = chartWidth;
        chart.chartHeight = chartHeight;

        return pos;
    });

    /**
     * Find the new position and perform the move. This override is identical
     * to the core function, except the anchorX and anchorY arguments to move().
     */
    H.Tooltip.prototype.updatePosition = function(point) {
        var chart = this.chart,
            label = this.label,
            pos = (this.options.positioner || this.getPosition).call(
                this,
                label.width,
                label.height,
                point
            );

        // do the move
        this.move(
            Math.round(pos.x),
            Math.round(pos.y || 0), // can be undefined (#3977)
            point.plotX + chart.plotLeft - pos.x,
            point.plotY + chart.plotTop - pos.y
        );
    };

}(Highcharts));


    let data = [{
        values: [
            1.0,
            0.0
        ],
        name: "#1"
    }, {
        values: [
            0.0, -1.0
        ],
        name: "#2"
    }, {
        values: [
            0.0,
            0.0
        ],
        name: "#3"
    }, {
        values: [-1.0,
            0.0
        ],
        name: "#4"
    }, {
        values: [
            0.0,
            0.0
        ],
        name: "#5"
    }];
    let chart = Highcharts.chart('container', {
        chart: {
            type: 'line',
            height: 45,
            style: {
                overflow: 'visible'
            }
        },
        xAxis: {
            minPadding: 0.000,
            maxPadding: 0.000,
            startOnTick: false,
            endOnTick: false,
            tickWidth: 0,
            gridLineWidth: 0,
            lineWidth: 0,
            labels: {
                enabled: false
            },
            title: {
                text: null
            }
        },
        yAxis: {
            minPadding: 0.001,
            maxPadding: 0.001,
            gridLineWidth: 0,
            lineWidth: 0,
            labels: {
                enabled: false
            },
            title: {
                text: null
            }
        },
        lang: {
            noData: 'No data'
        },
        credits: {
            enabled: false
        },
        legend: {
            enabled: false
        },
        exporting: {
            enabled: false
        },
        title: {
            text: ''
        },
        tooltip: {
            shared: true
        },
        plotOptions: {
            series: {
                marker: {
                    enabled: false
                }
            }
        },
        series: [{
            data: []
        }]

    });
    data.forEach((seriesData) => {
        chart.addSeries({
            name: seriesData.name,
            data: seriesData.values
        });
    });
});

Answer 1

您可以扩展Chart.showResetZoom以完全不执行该功能而不绘制按钮。例如（JSFiddle）：

(function (H) {
    H.wrap(H.Chart.prototype, 'showResetZoom', function (proceed) {
    });
}(Highcharts));

Answer 2

您可以将按钮的 CSS display 属性设置为 none。

chart1 = new Highcharts.Chart({
    chart: {
        type: 'line',
        zoomType: 'x',
        renderTo: 'chart',
        resetZoomButton: {
            theme: { style: { display: 'none'} }
        }
    },
    ...

或者，您可以强制按钮显示然后销毁它。

chart1 = new Highcharts.Chart({ ... });

chart1.showResetZoom();
chart1.resetZoomButton.destroy();

Highcharts - 始终隐藏重置缩放按钮

2 个答案: