高图表 - 具有堆积柱形图的详细信息图表

Highcharts - Detail chart with stacked columns

本文关键字：详细信息柱形图高图表更新时间：2023-09-26

我正在尝试使用带有堆积柱形图的高图表创建详细图表。
问题是当您在主图表上选择所需的范围时，它仅影响堆积柱形图的 1 个部分。

总的来说，我对编程很陌生，到处寻找解决方案，所以任何帮助将不胜感激。

JSFiddle演示了这个问题：http://jsfiddle.net/jp3qpfyw/

代码的高图表部分（数据/序列数组替换为通用数字）：

$(function () {
    var data = [0.8446, 0.8445, 0.8444, 0.8451, 0.8418, 0.8264, 0.8258, 0.8232, 0.8233, 0.8258,
                0.8283, 0.8278, 0.8256, 0.8292, 0.8239, 0.8239, 0.8245, 0.8265, 0.8261, 0.8269,
                0.8273, 0.8244, 0.8244, 0.8172, 0.8139, 0.8146, 0.8164, 0.82, 0.8269, 0.8269];
    var masterChart,
        detailChart;
    $(document).ready(function() {

        // create the master chart
        function createMaster() {
            masterChart = new Highcharts.Chart({
                chart: {
                    renderTo: 'master-container',
                    reflow: false,
                    borderWidth: 0,
                    backgroundColor: null,
                    marginLeft: 50,
                    marginRight: 20,
                    zoomType: 'x',
                    events: {
                        // listen to the selection event on the master chart to update the
                        // extremes of the detail chart
                        selection: function(event) {
                            var extremesObject = event.xAxis[0],
                                min = extremesObject.min,
                                max = extremesObject.max,
                                detailData = [],
                                xAxis = this.xAxis[0];
                            // reverse engineer the last part of the data
                            jQuery.each(this.series[0].data, function(i, point) {
                                if (point.x > min && point.x < max) {
                                    detailData.push({
                                        x: point.x,
                                        y: point.y
                                    });
                                }
                            });
                            // move the plot bands to reflect the new detail span
                            xAxis.removePlotBand('mask-before');
                            xAxis.addPlotBand({
                                id: 'mask-before',
                                from: -0.5,
                                to: min,
                                color: 'rgba(0, 0, 0, 0.2)'
                            });
                            xAxis.removePlotBand('mask-after');
                            xAxis.addPlotBand({
                                id: 'mask-after',
                                from: max,
                                to: 30.5,
                                color: 'rgba(0, 0, 0, 0.2)'
                            });

                            detailChart.series[0].setData(detailData);
                            return false;
                        }
                    }
                },
                title: {
                    text: null
                },
                xAxis: {
                    categories: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30]
                },
                yAxis: {
                    gridLineWidth: 0,
                    labels: {
                        enabled: false
                    },
                    title: {
                        enabled: false
                    },
                },
                tooltip: {
                    enabled: false
                },
                legend: {
                    enabled: false
                },
                credits: {
                    enabled: false
                },
                series: [{
                    type: 'column',
                    data: data
                }],
            }, function(masterChart) {
                createDetail(masterChart)
            });
        }
        // create the detail chart
        function createDetail(masterChart) {
            var detailData = [];
            jQuery.each(masterChart.series[0].data, function(i, point) {
                detailData.push(point.y);
            });

            detailChart = new Highcharts.Chart({
                chart: {
                    type: 'column',
                    marginBottom: 120,
                    renderTo: 'detail-container',
                    reflow: false,
                    marginLeft: 50,
                    marginRight: 20,
                    style: {
                    position: 'absolute'
                    }
                },
                credits: {
                    enabled: false
                },
                legend: {
                    enabled: false
                },
                tooltip: {
                    enabled: false
                },
                title: {
                    text: 'title'
                },
                xAxis: {
                    categories:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30]
                },
                plotOptions: {
                    column: {
                        stacking: 'normal',
                        dataLabels: {
                            enabled: false
                        }
                    }
                },
                series: [{
                    name: 'Purchase',
                    data: [0.8446, 0.8445, 0.8444, 0.8451, 0.8418, 0.8264, 0.8258, 0.8232, 0.8233, 0.8258,
                           0.8283, 0.8278, 0.8256, 0.8292, 0.8239, 0.8239, 0.8245, 0.8265, 0.8261, 0.8269,
                           0.8273, 0.8244, 0.8244, 0.8172, 0.8139, 0.8146, 0.8164, 0.82, 0.8269, 0.8269]
                }, {
                    name: 'Records',
                    data: [0.7901, 0.7898, 0.7879, 0.7886, 0.7858, 0.7814, 0.7825, 0.7826, 0.7826, 0.786,
                           0.7878, 0.7868, 0.7883, 0.7893, 0.7892, 0.7876, 0.785, 0.787, 0.7873, 0.7901,
                           0.7936, 0.7939, 0.7938, 0.7956, 0.7975, 0.7978, 0.7972, 0.7995, 0.7995, 0.7994]
                }]
            });
        }
        // make the container smaller and add a second container for the master chart
        var $container = $('#container')
            .css('position', 'relative');
        var $detailContainer = $('<div id="detail-container">')
            .appendTo($container);
        var $masterContainer = $('<div id="master-container">')
            .css({ position: 'absolute', top: 300, height: 100, width: '100%' })
            .appendTo($container);
        // create master and in its callback, create the detail chart
        createMaster();
    });
});

selection 事件处理程序仅更新绑定到主图表的序列。我会重写它以调整图表上的最小值/最大值，以便整个事情更新：

selection: function(event) {
    var extremesObject = event.xAxis[0],
        min = extremesObject.min,
        max = extremesObject.max,
        xAxis = this.xAxis[0];
    var detailXAxis = detailChart.xAxis[0];
    detailXAxis.update({ min: min, max: max }); // instead of filtering and setting data, just set min/max
    // move the plot bands to reflect the new detail span
    xAxis.removePlotBand('mask-before');
    xAxis.addPlotBand({
        id: 'mask-before',
        from: -0.5,
        to: min,
        color: 'rgba(0, 0, 0, 0.2)'
    });
    xAxis.removePlotBand('mask-after');
    xAxis.addPlotBand({
        id: 'mask-after',
        from: max,
        to: 30.5,
        color: 'rgba(0, 0, 0, 0.2)'
    });
    return false;
}

更新的小提琴。