2016-11-07 5 views
0

Я хочу преобразовать накопленный график в некумулятивный график. В принципе у меня есть демо, чтобы показать вам:Конвертировать накопленный график в некумулятивный с использованием высоких диаграмм

Это кумулятивный график: http://jsfiddle.net/h1qq1rj8/

И это не кумулятивный график: http://jsfiddle.net/h1qq1rj8/2/

$(function() { 
    Highcharts.chart('container', { 
     chart: { 
      type: 'column' 
     },  
     title: { 
      text: 'Total fruit consumtion, grouped by gender' 
     },  
     xAxis: { 
      categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'] 
     },  
     yAxis: { 
      allowDecimals: false, 
      min: 0, 
      title: { 
       text: 'Number of fruits' 
      } 
     },  
     tooltip: { 
      formatter: function() { 
       return '<b>' + this.x + '</b><br/>' + 
        this.series.name + ': ' + this.y + '<br/>' + 
        'Total: ' + this.point.stackTotal; 
      } 
     },  
     plotOptions: { 
      column: { 
       stacking: 'normal' 
      } 
     },  
     series: [{ 
      name: 'John', 
      data: [1, 8, 12, 13, 23], // I need to convert this data to non-cumulative 
      stack: 'male' 
     }] 
    }); 
}); 

Я совмещаться данные, чтобы превратить его в не кумулятивный Я вычитаю данные в бэкэнд, но из-за этого я получаю медленную производительность, разве нет возможности сделать диаграмму не кумулятивной в самом API-интерфейсе highcharts?

Edit:

У меня есть еще один график, где данные форматируются по-разному: http://jsfiddle.net/h1qq1rj8/3/

+1

3-й элемент должен быть 5 (который составляет 12-8) или 4 (который составляет 12-8-1)? – Dekel

+0

Это должно быть 4, спасибо за указание, я отредактировал вопрос с фиксированной информацией. – user1735921

ответ

1

Highcharts не будет делать расчеты на данных, прежде чем рисовать диаграммы, но вы можете переместить вычисление этого определенную часть от серверной стороны к стороне клиента.

Вы можете использовать функцию reduce на массив, чтобы получить желаемый результат:

old_ar = [1, 8, 12, 13, 23] 
 
new_ar = old_ar.reduce(function(a, b, c, d) { if (a.length) {a.push(d[c]-d[c-1])} else {a = [b]} return a;}, []) 
 
console.log(new_ar)

Для второго типа данных, которые вы можете использовать это:

old_ar = [[0,1],[1,8],[2,12],[3,13],[4,23]] 
 
new_ar = old_ar.reduce(function(a, b, c, d) { if (a.length) {a.push([d[c][0], d[c][1]-d[c-1][1]])} else {a = [b]} return a;}, []) 
 
console.log(new_ar)

+0

Привет, спасибо, что сделал трюк! Но у меня есть еще один график, где данные не отформатированы так: http://jsfiddle.net/h1qq1rj8/3/ – user1735921

+0

, поэтому в основном вы задаете вопрос, но вы имели в виду что-то еще? :) (вы можете использовать функцию 'reduce' для этого ... вам просто нужно написать немного по-другому) – Dekel

+0

добавил второй стиль – Dekel

Смежные вопросы