Highcharts Grouped Column с временными рядами

Question

Я знаю, как сделать регулярные столбцы в сгруппированных диаграммах, и я знаю, как создавать временные ряды для линейной диаграммы ИЛИ столбцов (у них есть примеры для них), но я могу " t, похоже, выяснить, как создать временной ряд для сгруппированных столбцов. Самое близкое, что я могу получить, это перекрывающиеся столбцы.

Я ищу что-то вроде этого (сделал в краске): (https://i467.photobucket.com/albums/rr40/hosoi_dan/grouped_column_time_series_zpsbd2afb7d.jpg)

Вот что мой код выглядит следующим образом: `

var data = 
[ 
    /* Apr 2013 */ 
    {name:"T1",x:1364774400000, y:13918927, color:"red"}, 
    {name:"T1",x:1364774400000, y:10920462, color:"green"}, 
    [1364860800000,18920462], 
    [1364947200000,12971961], 

    /* May 2013 */ 
    [1367366400000,18112671], 
    [1367452800000,15072312] 
]; 




$('#container').highcharts('StockChart', { 
    chart: { 
     alignTicks: false, 
      type: 'column' 
    }, 
    rangeSelector: { 
     selected: 1 
    }, 
    title: { 
     text: 'AAPL Stock Volume' 
    }, 

    series: [{ 
     name: 'AAPL Stock Volume', 
     data: data 
    }] 
}); 

`

И jsfillde с кодом: http://jsfiddle.net/UH5wj/

Answer 1

Это общая идея: http://jsfiddle.net/wFpey/

Таким образом разделить данные в ряды по названию. Затем создайте массив точек, где каждая точка - объект или массив (мой пример - массив).

var series = [ { 
    name: "T1", 
    data: [ 
     [1364774400000, 13918927], [1364974400000, 13918927] 
    ], 
    color: "red" 
}, { 
    name: "T2", 
    data: [ 
     [1364774400000,10920462], [1364974400000, 13918927] 
    ], 
    color: "green" 
}, { 
    name: "T3", 
    data: [ 
     [1364774400000, 12312312], [1364974400000, 13918927] 
    ], 
    color: "blue" 
}, { 
    name: "T4", 
    data: [ 
     [1364774400000, 12311111], [1364974400000, 13918927] 
    ], 
    color: "yellow" 
}, { 
    name: "T5", 
    data: [ 
     [1364774400000, 11233345], [1364974400000, 13918927] 
    ], 
    color: "gray" 
}, { 
    name: "T6", 
    data: [ 
     [1364774400000, 14322311] 
    ], 
    color: "black" 
}]; 

Answer 2

Не видя, как ваши данные поступают, я могу только дождаться вас, но взгляните на это. Два ключа здесь расстояние между точками серии, позаботились о в разделе plotOptions и определение категории на XAxis быть сгруппировано в Fiddle

$(function() { 

var data = 
[ 
/* Apr 2013 */ 
{name:"T1",x:1364774400000, y:13918927, color:"red"}, 
{name:"T1",x:1364774400000, y:10920462, color:"green"}, 
[1364860800000,18920462], 
[1364947200000,12971961], 
/* May 2013 */ 
[1367366400000,18112671], 
[1367452800000,15072312] 
]; 
    /*$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-  v.json&callback=?', function(data) {*/ 

    // create the chart 
    $('#container').highcharts('StockChart', { 
     chart: { 
      alignTicks: false, 
      type: 'column' 
     }, 

     plotOptions: { 
     series: { 
      pointPadding: 0, 
      groupPadding: 0, 
      borderWidth: 0, 
      shadow: false 
      } 
     }, 
     rangeSelector: { 
      selected: 1 
     }, 

     title: { 
      text: 'AAPL Stock Volume' 
     }, 

     series: [{ 
      name: 'AAPL Stock Volume', 
      data: data 
     }], 
     xAxis: { 
      categories: ['Apr 2013', 'May 2013'] ///needs to be specific to your data, this is just an idea not knowing your data 
     }, 
    }); 
//}); 
}); 

EDIT:. Видели ваши данные Наверху после этого, необходимо щипание немного, но я надеюсь, что вы получите идею