Highchart selection without zoom

$(function () {
    var $report = $('#report');
    
    // create the chart
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            events: {
                selection: function(event) {
                    if (event.xAxis) {
                        $report.html('min: '+ event.xAxis[0].min +', max: '+ event.xAxis[0].max);
                        return false;
                    }
                }
            },
            zoomType: 'x'
        },
        xAxis: {
        },
        
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
        }]
    });
});

  http://jsfiddle.net/8LBFp/

 

 

$(function () {
    var rectangle;
    
    // create the chart
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            events: {
                selection: function(event) {
                    var xMin = chart.xAxis[0].translate((event.xAxis[0]||chart.xAxis[0]).min),
                        xMax = chart.xAxis[0].translate((event.xAxis[0]||chart.xAxis[0]).max),
                        yMin = chart.yAxis[0].translate((event.yAxis[0]||chart.yAxis[0]).min),
                        yMax = chart.yAxis[0].translate((event.yAxis[0]||chart.yAxis[0]).max);

                    rectangle.attr({
                        x: xMin + chart.plotLeft,
                        y: chart.plotHeight + chart.plotTop - yMax,
                        width: xMax - xMin,
                        height: yMax - yMin
                    });
                    
                    return false;
                }
            },
            zoomType: 'x'
        },
        xAxis: {
        },
        
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
        }]
    });
    
    rectangle = chart.renderer.rect(0,0,0,0,0).css({
        stroke: 'black',
        strokeWidth: '.5',
        fill: 'black',
        fillOpacity: '.1'
    }).add();
});

  http://jsfiddle.net/meFgf/

posted @ 2015-07-20 17:27  zhh  阅读(248)  评论(0编辑  收藏  举报