点击图表放大图表

Question

我知道highstock不支持点击放大图表 http://www.highcharts.com/docs/chart-concepts/zooming 但是我想点击图表，图表会显示所有屏幕，包括表格"Time updates"。我能怎么做？例如：http://jsfiddle.net/DuyThoLe/58bzo3vg/17/enter code here

Answer 1

从这个 Hgihcharts 演示开始 - http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/events-container/

...可以让它与您的图表一起使用：http://jsfiddle.net/6jLg8fg5/1/

稍后您想在弹出窗口 window 中包含 "Time update"，因此它被添加到 div 中，这将更改其 class（并且由于 CSS 将显示在顶部，就像弹出窗口一样）：http://jsfiddle.net/6jLg8fg5/4/

接下来您希望能够打印、导出、单击图例而不弹出或返回图表。您可以推迟（例如使用 setTimeout）弹出效果并检查点击是否未触发图例或导出菜单。系列有 legendItemClick 事件 - 所以首先我们应该检查一下。打印图表时会触发 afterPrinting 和 beforePrinting 事件。对于导出 - 可以使用包装（扩展 Highcharts）从导出模块重写 getChartHTML - http://jsfiddle.net/6jLg8fg5/5/

JS:

$(function () {
    (function (H) {
        H.wrap(H.Chart.prototype, 'getChartHTML', function (proceed) {
            printing = true;
            // Run original proceed method
            return this.container.innerHTML;
        });
    }(Highcharts));

    Highcharts.setOptions({
        global: {
            useUTC: false
        }
    });

    var legendClicked = false,
        printing = false; //or exporting
    // Create the chart
    $('#chart1').highcharts('StockChart', {
        chart: {
            borderWidth: 0,
            height: 283,
            width: 660,
            events: {
                beforePrint: function() {
                    printing = true;
                },
                afterPrint: function(){
                    printing = false;
                }
            }
        },

        rangeSelector: {
            buttons: [{
                count: 1,
                type: 'minute',
                text: '1M'
            }, {
                count: 5,
                type: 'minute',
                text: '5M'
            }, {
                type: 'all',
                text: 'All'
            }],
            inputEnabled: false,
            selected: 0
        },

        title: {
            text: 'Live random data'
        },
        legend: {
            enabled: true
        },
        exporting: {
            enabled: true
        },
        navigator: {
            enabled: true
        },
        series: [{
            events: {
                legendItemClick: function () {
                    legendClicked = true;
                }
            },
            name: 'Random data',
            data: (function () {
                // generate an array of random data
                var data = [],
                    time = (new Date()).getTime(),
                    i;

                for (i = -999; i <= 0; i += 1) {
                    data.push([
                    time + i * 1000,
                    Math.round(Math.random() * 100)]);
                }
                return data;
            }())

        }]

    });

    //the form action
    var updateInterval = 10000;
    $("#updateInterval").val(updateInterval).change(function () {

        var v = $(this).val();
        if (v && !isNaN(+v)) {
            updateInterval = +v;
            if (updateInterval < 1) {
                updateInterval = 1;
            } else if (updateInterval > 50000) {
                updateInterval = 10000;
            }
            $(this).val("" + updateInterval);
        }
    });

    function update() {
        var series = $('#chart1').highcharts().series[0];
        x = (new Date()).getTime(); // current time
        y = Math.round(Math.random() * 100);
        series.addPoint([x, y], true, true);
        setTimeout(update, updateInterval);
    }

    update();



    $('.chart-container').bind('mousedown', function () {
        var source = this;
        if(!printing) {
        setTimeout(function () {
            //check if legend was clicked
            if (legendClicked) {
                legendClicked = false;
            } else if ($('.highcharts-contextmenu').css('display') === 'block' || printing) {
                //check if context menu is visible
                printing = false;
            } else {
                //else do popup or back to default
                $('#chart-with-time-update').toggleClass('modal');
                $('.chart', source).highcharts().reflow();
            }
        }, 150);
        }
    });

});

CSS:

.main {
    width: 400px;
    margin: 0 auto;
}
.chart {
    min-width: 300px;
    max-width: 800px;
    height: 300px;
    margin: 1em auto;
}
.modal {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
}
.modal .chart {
    height: 90%;
    width: 90%;
    max-width: none;
}

最后，您需要使其适用于多个图表 - http://jsfiddle.net/6jLg8fg5/13/

（这个问题也在 Highcharts 论坛上讨论过：http://forum.highcharts.com/highstock-usage/click-on-the-chart-to-zoom-chart-t33714/）

点击图表放大图表

Click on the chart to zoom chart

javascript

highstock