2015-01-07 1 views
0

Итак, у меня есть объект JSON, который я пытаюсь построить, используя Highcharts. Объект JSON выглядит примерно следующим образом:Построить несколько рядов в одиночном графике Highcharts от JSON

json_data = [ 
    { 
     'name': "col1", 
     'data': [1, 2, 3, 4, 5]}, 
    { 
     'name': "col2", 
     'data': [2, 4, 6, 8, 10]}, 
    { 
     'name': "col3", 
     'data': [2, 3, 4, 5, 6]}, 
    { 
     'name': "col4", 
     'data': [-1, -2, -3, -4, -5]}, 
] 

Я могу построить его с помощью Highcharts со следующим кодом:

$('#container').highcharts({ 
     chart: { 
      type: 'line', 
     }, 
     legend: { 
       layout: 'vertical', 
       align: 'right', 
       verticalAlign: 'middle', 
       borderWidth: 0, 
     }, 
     title: { 
       text: 'Data', 
       x: -20 // center title 
     }, 
     xAxis: { 
       title: {text: 'Velocity (m/sec)'},    
     }, 
     yAxis: {title: {text: 'Force (N)'}}, 
     series: json_data, 
    }); 

Строит все 4 колонки в моей json_data, но то, что я пытаюсь сделать составляет col2 против col1 и col4 против col3 на том же графике, поэтому на диаграмме будет всего 2 строчных графика. Другими словами, ось x будет определяться как col1, так и col3, а две линии будут иметь разные интервалы (x-тики). Я знаю, что могу определить разные series в параметре series:, но я изо всех сил пытаюсь понять, как я могу выбрать их из моего объекта JSON.

По сути мне нужно изменить мой JSON от своего первоначального формата в два ряда данных, которые выглядят примерно так:

// col2 against col1 
series1 = [ [1, 2], 
      [2, 4], 
      [3, 6], 
      [4, 8], 
      [5, 10] 
] 

// col4 against col3 
series2 = [ [2, -1], 
      [3, -2], 
      [4, -3], 
      [5, -4], 
      [6, -5] 
] 

Любая помощь на том, как я мог бы сделать это было бы весьма признателен.

ответ

1

Для любого потомства здесь есть решение, которое я придумал, который предполагает, что каждый массив данных имеет ту же длину (мой случай использования):

var arr = [json_data]; 

    // first series data to plot 
    var series1 = []; 
    for (var i = 0; i < arr[0][0].data.length; i++) 
    { 
     var temp = []; 
     temp.push(arr[0][0].data[i]); 
     temp.push(arr[0][1].data[i]);     
     series1.push(temp); 
    } 

    // second series data to plot 
    var series2 = []; 
    for (var i = 0; i < arr[0][0].data.length; i++) 
    { 
     var temp = []; 
     temp.push(arr[0][2].data[i]); 
     temp.push(arr[0][3].data[i]);     
     series2.push(temp); 
    } 

И в моем параметре highcharts series::

 series: [{ 
      name: "Series 1", 
      data: series1 
    }, { 
      name: "Series 2", 
      data: series2 
    }],