Использование решетчатой ​​диаграммы со сложенными столбцами в верхних диаграммах

Question

У меня есть данные временного ряда, которые я хочу показать в виде решетчатой ​​диаграммы:

Вот базовая версия Trellis Chart с сайта Highcharts:

Вместо Эрика, Герта, Хельге, Торстейна я работаю над тем, чтобы заменить его на группы: Клиент, DII, FII, PRO.

В приведенной ниже таблице имя плодапростой ряд, но здесь у меня есть данные временного ряда: Длинные индексы Fut и короткие индексы Fut .Каждая из вышеуказанных групп (Клиент, DII ...) имеет свою собственную версию длинных и коротких индексов 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]

    }));
});

Ссылка на jsfiddle: http://jsfiddle.net/g6jLhux2/

Что я делаю не так?

Answer 1

В вашем случае вам нужно использовать

series: dataset.data

Кроме того, ваша ось X - это не дата-время, а категории, потому что дата-время предполагается передавать в виде чисел (миллисекунд).Затем вы должны использовать:

xAxis: {
  type: 'category'
},

, если вы хотите правильно отобразить данные в своих диаграммах. Смотрите обновленный jsfiddle

Помогает ли это вам?