Question

希望有人可以提供帮助，我已经搜索过这方面的示例，但无法让他们按照我的特定设置进行操作。我在Highcharts中有一个堆积柱形图，代表一周中每天的5组数据。

enter image description here

然后我选择一天查看当天的每小时细分，我有数据通过，但我无法获得每小时我有的5个值叠加在一起。（与第一张图表的方式相同） - 理想情况下，第二张图表是区域图表）

enter image description here

这是我的代码：

$(function () {

    Highcharts.setOptions({
    lang: {
        drillUpText: 'Reset'
    }
});

// Create the chart
$('#chart2').highcharts({
    chart: {
        type: 'column',
        height: 300
    },
    credits: {
        enabled: false
    },
    title: {
       text: null
    },
    subtitle: {
        text: 'Select a day to expand to hourly data'
    },

    legend: {
            enabled: false
        },


    tooltip: {
         formatter: function() {
            var point = this.point,
                s = 'Day: <b>' + point.name + '</b><br/>Utilisation: <b>' + this.y + '% </b><br/>';
            if (point.drilldown) {
                s = 'Day: <b>' + point.name + '</b><br/>Utilisation: <b>' + this.y + '% </b><br/>Select to view hours';
            } else {
                s = 'Time: <b>' + point.name + '</b><br/>Utilisation: <b>' + this.y + '% </b><br/>Reset to return';
            }
            return s;
            }

        },

    xAxis: {
        type: 'category',
        //categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        //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']
    },

    yAxis: {
         title: false, // {text: 'Utilisation'},  Y axis title - taken text out
         tickPositions: [0, 50, 70, 100],   // Y axis labels
         labels: {
            format: '{value}%'      // Y axis labels with % suffix
        },
        min: 0,                     // Following lines setting the grids to off adding min max
        max: 100,
        minorGridLineWidth: 0,
        gridLineWidth: 0,
        alternateGridColor: null,
        plotBands: [{ // Below Avg.
            from: 0,
            to: 50,
            color: 'rgba(255,108,96, 0.5)',
            label: {
                // text: 'Below Average',
                style: {
                    color: 'rgba(153,194,98, 0.8)'
                }
            }
        }, { // Average
            from: 50,
            to: 70,
            color: 'rgba(248,211,71, 0.5)',
            label: {
                // text: 'Average',
                style: {
                    color: 'rgba(153,194,98, 0.8)'
                }
            }
        }, { // Above Avg.
            from: 70,
            to: 100,
            color: 'rgba(153,194,98, 0.5)',
            label: {
                text: 'Above Average',
                style: {
                    color: 'rgba(153,194,98, 0.8)'
                }
            }
        }]
    },

    plotOptions: {
        series: {
            stacking: 'normal'
            }
        },

    series: [{
        type: 'column',
        name: 'Status 5',
        color: '#86C9F2',       
        borderWidth: 0,
        shadow: true,
        data: [<?php echo $data7a5?>]
    }, {
        type: 'column',
        name: 'Status 4',
        color: '#6FB2DB',
        borderWidth: 0,
        shadow: true,
        data: [<?php echo $data7a4?>]
    }, {
        type: 'column',
        name: 'Status 3',
        color: '#589BC4',
        borderWidth: 0,
        shadow: true,
        data: [<?php echo $data7a3?>]
    }, {
        type: 'column',
        name: 'Status 2',
        color: '#4184AD',
        borderWidth: 0,
        shadow: true,
        data: [<?php echo $data7a2?>]
    }, {
        type: 'column',
        name: 'At the Desk',
        color: '#2B6E97',           //rgb(43, 110, 151)
        borderWidth: 0,
        shadow: true,
        data: [<?php echo $data7a?>]
    }],
    drilldown: {
        drillUpButton: {
            //relativeTo: 'spacingBox',
            position: {
                y: 10,
                x: -10
            },
        theme: {
                fill: 'white',
                stroke: 'silver',
                r: 2,
                states: {
                    hover: {
                        fill: '#41739D',
                        style: {
                            color: 'white'
                        }
                    }
                }
            }
        },

        series: [{
            type: 'column',
            id: 'D2',
            data: [['8', 13.77],['8', 2.74],['8', 1.27],['8', 2.64],['8', 2.28],['9', 29.30],['9', 6.44],['9', 3.79],['9', 5.11],['9', 5.32],['10', 36.41],['10', 9.01],['10', 5.47],['10', 7.11],['10', 7.06],['11', 34.12],['11', 7.50],['11', 4.48],['11', 10.02],['11', 8.28],['12', 26.82],['12', 5.03],['12', 5.79],['12', 15.00],['12', 10.27],['13', 30.08],['13', 5.40],['13', 5.34],['13', 11.73],['13', 9.57],['14', 33.90],['14', 7.75],['14', 4.78],['14', 6.41],['14', 9.33],['15', 33.27],['15', 7.73],['15', 4.95],['15', 8.11],['15', 7.09],['16', 31.29],['16', 8.53],['16', 4.51],['16', 6.44],['16', 5.81],['17', 17.36],['17', 3.87],['17', 2.06],['17', 4.47],['17', 3.42],['18', 4.79],['18', .38],['18', .79],['18', 1.44],['18', 2.45]]
        }, {
            type: 'area',
            id: 'D3',
            data: [<?php echo $data7b2?>]
        }, {
            type: 'area',
            id: 'D4',
            data: [<?php echo $data7b3?>]
        }, {
            type: 'area',
            id: 'D5',
            data: [<?php echo $data7b4?>]
        }, {
            type: 'area',
            id: 'D6',
            data: [<?php echo $data7b5?>]
        }]
      }
    });

}）;

我已经显示了第一个深入分析数据，因此您可以看到结构。任何帮助将不胜感激。

由于罗布

Answer 1

您可以将深入挖掘数据的类型从['time', data]更改为[time, data]：

data: [
                ['8', 13.77],
                ['8', 2.74],
                ['8', 1.27],
                ['8', 2.64],
                ['8', 2.28],
                ['9', 29.30],
                ['9', 6.44],
                ['9', 3.79],
                ['9', 5.11],
                ['9', 5.32],
                ...
]

为：

data: [
                [8, 13.77],
                [8, 2.74],
                [8, 1.27],
                [8, 2.64],
                [8, 2.28],
                [9, 29.30],
                [9, 6.44],
                [9, 3.79],
                [9, 5.11],
                [9, 5.32],
                ...
]

我还更改了tooltip.formatter以显示正确的下钻工具提示。这是DEMO

Highcharts - 在向下钻取中堆栈图表到堆栈图表

1 个答案: