Question

我在Highcharts中有一个条形图和样条曲线图。图表上已启用缩放选项，因此当我选择特定区域时，它会放大。是否可以获得所选区域的x轴值进行缩放？例如，如果x轴具有从01-01-2015到30-01-2015的日期并且我选择要放大的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] 之类的内容来访问其值，并获取所需的原始值。 / p>

希望有所帮助

在Highcharts

1 个答案: