Javascript 在Highcharts中使用带堆叠列的网格图

Javascript 在Highcharts中使用带堆叠列的网格图,javascript,highcharts,Javascript,Highcharts,我有一个时间序列数据,我想以网格图的形式显示: 以下是Highcharts网站上的基本网格图: 我不再是Erik、Gert、Helge、Torstein,而是用组来取代它:客户、DII、FII、PRO 在下图中,水果名称是一个简单的序列,但这里我有一个时间序列数据:Fut指数多头和Fut指数空头。 上述每个分组(客户、DII…)都有自己的Fut指数多头和Fut指数空头版本 我想展示Fut指数多头,Fut指数空头和x轴叠加,表示不同的日子 我曾尝试使用嵌套序列来完成此操作,但没有显示任何数据。以

我有一个时间序列数据,我想以网格图的形式显示:

以下是Highcharts网站上的基本网格图:

我不再是Erik、Gert、Helge、Torstein,而是用组来取代它:客户、DII、FII、PRO

在下图中,水果名称是一个简单的序列,但这里我有一个时间序列数据:Fut指数多头和Fut指数空头。 上述每个分组(客户、DII…)都有自己的Fut指数多头和Fut指数空头版本

我想展示Fut指数多头,Fut指数空头和x轴叠加,表示不同的日子

我曾尝试使用嵌套序列来完成此操作,但没有显示任何数据。以下是我的资料来源:

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: 'bar',
            marginLeft: i === 0 ? 100 : 10
        },

        title: {
            text: dataset.name,
            align: 'left',
            x: i === 0 ? 90 : 0
        },

        credits: {
            enabled: false
        },

        xAxis: {
                    type: 'datetime'
            },

        yAxis: {
            allowDecimals: false,
            title: {
                text: null
            },
            min: 0,
            max: 10
        },

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

        legend: {
            enabled: false
        },

        series: [dataset]

    }));
});
指向JSFIDLE的链接:


我做错了什么?

在您的情况下,您需要使用

series: dataset.data
此外,x轴不是datetime,而是类别,因为datetime应该作为数字(毫秒)传递。然后必须使用:

xAxis: {
  type: 'category'
},
如果您想在图表中正确显示数据


这对你有帮助吗

为了好玩,我在你的例子中添加了一个传奇。