Поломка в highchart поколения

Question

Это мои данные JSON

[ 
    { 
     "project_title":"sdsdsd", 
     "project_ref_id":"112", 
     "amount":"232323.00", 
     "months":"Mar-2015" 
    },{ 
     "project_title":"test project 44", 
     "project_ref_id":"113", 
     "amount":"13000.00", 
     "months":"Feb-2016" 
    },{ 
     "project_title":"sdsdsd", 
     "project_ref_id":"112", 
     "amount":"50000.00", 
     "months":"Mar-2016" 
    },{ 
     "project_title":"hello wolrd", 
     "project_ref_id":"111", 
     "amount":"30000.00", 
     "months":"Mar-2016" 
    },{ 
     "project_title":"sdsdsd", 
     "project_ref_id":"112", 
     "amount":"2000.00", 
     "months":"Apr-2016" 
    },{ 
     "project_title":"road construction", 
     "project_ref_id":"108", 
     "amount":"1000.00", 
     "months":"Apr-2016" 
    },{ 
     "project_title":"road construction", 
     "project_ref_id":"108", 
     "amount":"299090.00", 
     "months":"May-2016" 
    },{ 
     "project_title":"sdsdsd", 
     "project_ref_id":"112", 
     "amount":"384357.00", 
     "months":"May-2016" 
    },{ 
     "project_title":"road construction", 
     "project_ref_id":"108", 
     "amount":"2365236.00", 
     "months":"Jun-2016" 
    } 
] 

Я пытаюсь создать высокий график с месяц в оси х, количество в оси у

Это код, который я пытался http://jsfiddle.net/4bsvjzus/5/

Строка, которая сгенерирована, является правильным, но есть разрыв в строке.

Если вы видите приведенный выше код скрипки. Проект с именем project1 имеет количество 232323 в mar-2015 и 50000 в mar-2016, 2000 в apr-2016, 384357 в may-2016 .There нет данных для проекта project1 в feb-2016, следовательно, граф вскрыт при feb-2016, в то время как имеются данные для feb-2016 для других проектов ,

Следовательно, всякий раз, когда нет данных за определенный месяц, график прерывается и продолжается с месяца, у которого есть данные.

График не должен разбиваться посередине. Если данных за месяц нет, на графике должна отображаться точка со значением 0 за этот месяц

Answer 1

Я помню, как ответил несколько дней назад, отвечая a very similar question of you. У него также была небольшая проблема с значениями y, чтобы разбить график. Я копирую здесь то же самое решение, которое, по-видимому, прекрасно работает. Линия (new Array(months.length)).fill(0).map((e,i) => i === months.indexOf(c.months) ? c.amount*1 : e) отвечает за формирование начального массива, заполненного нулями, и значения для позиции индекса месяцев. (Т.е. значение Jan в индексе 0 значения Dec по индексу 11)

var data = [{"project_title":"sdsdsd","project_ref_id":"112","amount":"232323.00","months":"Mar-2015"},{"project_title":"test project 44","project_ref_id":"113","amount":"13000.00","months":"Feb-2016"},{"project_title":"sdsdsd","project_ref_id":"112","amount":"50000.00","months":"Mar-2016"},{"project_title":"hello wolrd","project_ref_id":"111","amount":"30000.00","months":"Mar-2016"},{"project_title":"sdsdsd","project_ref_id":"112","amount":"2000.00","months":"Apr-2016"},{"project_title":"road construction","project_ref_id":"108","amount":"1000.00","months":"Apr-2016"},{"project_title":"road construction","project_ref_id":"108","amount":"299090.00","months":"May-2016"},{"project_title":"sdsdsd","project_ref_id":"112","amount":"384357.00","months":"May-2016"},{"project_title":"road construction","project_ref_id":"108","amount":"2365236.00","months":"Jun-2016"}], 
 
months = data.reduce((p,c) => ~p.indexOf(c.months) ? p : p.concat(c.months),[]), 
 
series = data.reduce((p,c) => { var f = p.find(f => f.name == c.project_title); 
 
           !!f ? f.data[months.indexOf(c.months)] = c.amount*1 
 
            : p.push({name: c.project_title, 
 
               data: (new Array(months.length)).fill(0).map((e,i) => i === months.indexOf(c.months) ? c.amount*1 : e)}); 
 
           return p; 
 
           },[]); 
 
    $('#container').highcharts({ 
 
     title: { 
 
      text: 'Retaielr Clicks', 
 
      x: -20 //center 
 
     }, 
 
     subtitle: { 
 
      text: 'Date', 
 
      x: -20 
 
     }, 
 
     xAxis: { 
 
      categories: months 
 
     }, 
 
     yAxis: { 
 
      title: { 
 
       text: 'Clicks' 
 
      }, 
 
      plotLines: [{ 
 
       value: 0, 
 
       width: 1, 
 
       color: '#808080' 
 
      }] 
 
     }, 
 
     tooltip: { 
 
       // valueSuffix: '°C' 
 
     }, 
 
     legend: { 
 
      layout: 'vertical', 
 
      align: 'right', 
 
      verticalAlign: 'middle', 
 
      borderWidth: 0 
 
     }, 
 
     series: series 
 
    });

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
 

 
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>