在 Highcharts 中选择缩放范围时获取 x 轴范围

Question

我在 Highcharts 中有一个条形图和一个样条图。图表上启用了缩放选项，因此当我 select 特定区域时它会放大。是否可以获取缩放后 selected 区域的 x 轴值？例如，如果 x 轴的日期从 01-01-2015 到 30-01-2015 并且我 select 从 01-01-2015 到 15-01-2015 的范围被缩放，它给了我1 到 15.3（基本上是根据列的长度转换 x 轴）而不是 01-01-2015 到 15-01-2015.

$(function () {
    $('#container').highcharts({
        chart: {
            events: {
                selection: function (event) {
                    var text, label;
                    if (event.xAxis) {
                        text = 'min: ' + Highcharts.numberFormat(event.xAxis[0].min, 2) + ', max: ' + Highcharts.numberFormat(event.xAxis[0].max, 2);
                    } else {
                        text = 'Selection reset';
                    }
                    label = this.renderer.label(text, 100, 120)
                        .attr({
                            fill: Highcharts.getOptions().colors[0],
                            padding: 10,
                            r: 5,
                            zIndex: 8
                        })
                        .css({
                            color: '#FFFFFF'
                        })
                        .add();

                    setTimeout(function () {
                        label.fadeOut();
                    }, 3000);
                }
            },
            zoomType: 'x'
        },
        title: {
            text: '',
            style: {
                color: '#cc0000',
                fontWeight: 'bold'
            }
        },
        xAxis: {
            categories: [{{{xaxisLabel}}}],
            crosshair: true
        },
         yAxis: [{ /* Primary yAxis */
            labels: {
                format: '{value}%',
                style: {
                    color: '#cc0000'
                }
            },
            title: {
                text: 'Failure Percentage',
                style: {
                    color: '#cc0000'
                }
            }
        }, { /* Secondary yAxis */
            title: {
                text: 'Success Percentage',
                style: {
                    color: '#009900'
                }
            },
            max: 100, 
            labels: {
                format: '{value} %',
                style: {
                    color: '#009900'
                }
            },
            opposite: true
        }],
        labels: {
            items: [{
                html: '',
                style: {
                    left: '2px',
                    top: '18px',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
                }
            }]
        },
        credits: {
          enabled: false
        },
        series: [{
            type: 'column',
            name: 'Success',
            color: '#7deda2',
            yAxis: 1,
            tooltip: {
                pointFormatter: function(){
                  return "Success: " + this.y + "%" + "<br />" + "Success docs: " + toolTipSuccess[this.series.data.indexOf( this )] + "<br />";
                }
            },
            data: [{{barSuccess}}]
        }, {
            type: 'spline',
            name: 'Failure',
            tooltip: {
                pointFormatter: function(){
                  return "Failure: " + this.y + "%" + "<br />" + "Failure docs: " + toolTipFailure[this.series.data.indexOf( this )] + "<br />";
                }
            },
            data: [{{barFailure}}],
            marker: {
                lineWidth: 3,
                lineColor: Highcharts.getOptions().colors[8],
                fillColor: 'red'
            }
        }]
    });
});

提前致谢

Answer 1

您可以使用 event.xAxis[0].min 和 event.xAxis[0].max 作为索引。

因此，假设您的 xaxis 类别数组称为 xaxis_array，您可以使用 xaxis_array[event.xAxis[0].min 之类的内容来访问其值]并得到你需要的原始值。

希望对您有所帮助

在 Highcharts 中选择缩放范围时获取 x 轴范围

Get the x axis range on selecting a zoom range in Highcharts

axis

graph

range

zooming

highcharts