Highcharts中堆叠柱形网格图（Trellis Chart）无数据问题求助

嘿，我帮你找出问题所在啦！你的代码有几个关键错误导致图表没有数据显示，我来一步步拆解并给出修复方案：

核心错误点 #

• Series结构完全错了：你把整个dataset对象直接塞进了series数组，但Highcharts的series需要的是单个系列的配置对象数组——你的dataset.data里才是真正要展示的两个系列（Fut Index Longs和Fut Index Shorts），而不是把整个分组对象当系列传进去。
• 图表类型和堆叠配置不匹配：你设了chart.type: 'bar'（横向柱形），但plotOptions里却配置了column（纵向柱形）的堆叠规则，这会让堆叠逻辑完全不生效，甚至影响数据渲染。
• 数据传递逻辑错误：[dataset]这种写法相当于告诉Highcharts“这是一个系列”，但这个对象根本不符合系列的格式要求，自然就没数据啦。

修复后的完整代码 #

var charts = [], 
    $containers = $('#trellis td'), 
    datasets = [ 
        { 
            name: 'Client', 
            data: [ 
                { name: "Fut Index Longs", data: [["2014-02-10", 5], ["2014-02-11", 9], ["2014-02-12", 7]] }, 
                { name: "Fut Index Shorts", data: [["2014-02-10", 5], ["2014-02-11", 9], ["2014-02-12", 2]] } 
            ] 
        }, 
        { 
            name: 'DII', 
            data: [ 
                { name: "Fut Index Longs", data: [["2014-02-10", 5], ["2014-02-11", 9], ["2014-02-12", 7]] }, 
                { name: "Fut Index Shorts", data: [["2014-02-10", 5], ["2014-02-11", 9], ["2014-02-12", 2]] } 
            ] 
        }, 
        { 
            name: 'FII', 
            data: [ 
                { name: "Fut Index Longs", data: [["2014-02-10", 5], ["2014-02-11", 9], ["2014-02-12", 7]] }, 
                { name: "Fut Index Shorts", data: [["2014-02-10", 5], ["2014-02-11", 9], ["2014-02-12", 2]] } 
            ] 
        }, 
        { 
            name: 'PRO', 
            data: [ 
                { name: "Fut Index Longs", data: [["2014-02-10", 5], ["2014-02-11", 9], ["2014-02-12", 7]] }, 
                { name: "Fut Index Shorts", data: [["2014-02-10", 5], ["2014-02-11", 9], ["2014-02-12", 2]] } 
            ] 
        } 
    ]; 

$.each(datasets, function(i, dataset) { 
    charts.push(new Highcharts.Chart({ 
        chart: { 
            renderTo: $containers[i], 
            type: 'column', // 改成column和plotOptions匹配，要横向的话就换成bar，同时plotOptions改成bar
            marginLeft: i === 0 ? 100 : 10 
        }, 
        title: { 
            text: dataset.name, 
            align: 'left', 
            x: i === 0 ? 90 : 0 
        }, 
        credits: { enabled: false }, 
        xAxis: { 
            type: 'datetime',
            labels: {
                format: '{value:%Y-%m-%d}' // 可选：让日期显示更友好
            }
        }, 
        yAxis: { 
            allowDecimals: false, 
            title: { text: null }, 
            min: 0, 
            max: 18 // 堆叠后总和会超过原来的10，所以调大最大值避免截断
        }, 
        plotOptions: { 
            column: { 
                stacking: 'normal' 
            } 
        }, 
        legend: { enabled: true }, // 可选：开图例方便区分两个系列
        series: dataset.data // 直接传分组下的两个系列数组，这才是正确的姿势！
    })); 
});

关键修改说明 #

1. 修复Series数据源：把series: [dataset]改成series: dataset.data，这样就把每个分组下的两个系列正确传递给Highcharts了，这是解决无数据的核心。
2. 统一图表类型和堆叠配置：我把chart.type改成了column，和plotOptions.column对应，确保堆叠逻辑生效；如果你想要横向的堆叠柱形，只需要把plotOptions改成bar，同时chart.type保持bar就行。
3. 调整Y轴最大值：因为是堆叠柱形，两个系列的数值总和会超过你原来设置的max:10，所以我调到了18，避免数据被截断。
4. 可选优化：开启了图例、格式化了X轴日期，让图表可读性更好。

这样修改后，每个网格图都会正确渲染出堆叠柱形，完美展示每个分组的Fut Index Longs和Shorts数据啦！

内容的提问来源于stack exchange，提问作者conquester