неправильное поколение Highcharts

Question

Я получаю данные в формате JSON, как показано ниже

<?php $monthlyParticipation='[{"project_title":"test project 44","project_ref_id":"113","amount":"13000.00","months":"Feb"},{"project_title":"sdsdsd","project_ref_id":"112","amount":"50000.00","months":"Mar"},{"project_title":"testing123","project_ref_id":"104","amount":"232323.00","months":"Mar"},{"project_title":"hello wolrd","project_ref_id":"111","amount":"30000.00","months":"Mar"},{"project_title":"road construction","project_ref_id":"108","amount":"1000.00","months":"Apr"},{"project_title":"sdsdsd","project_ref_id":"112","amount":"2000.00","months":"Apr"},{"project_title":"sdsdsd","project_ref_id":"112","amount":"354357.00,30000.00","months":"May"}]'; ?> 

Месяцы должен представить в оси х. В оси у, как имя project_title под series, сумму в качестве данных в соответствии с series

Я попытался код ниже https://jsfiddle.net/neb22v3j/1/

Но граф генерируется неверно. Он не соответствует данным json.

Ось X должна быть месяцем, на котором ось y должна отображать сумму против project_title. То, что я пробовал, составляет месяц в какой-то другой месяц. Сумма не относится к месяцу, в котором она отображается.

Пожалуйста, помогите мне решить эту проблему

Answer 1

Для вашей точки должны быть назначены на правильный месяц вы должны пройти null в качестве значения для всех месяцев, которые не имеют данных.

Я написал новую функцию для анализа данных, которые устанавливают значение datapoint в null, если проект не имеет значения для текущего месяца. (Проверьте комментарии в коде)

JSfiddle

Answer 2

Я думаю, ответ на ваш вопрос здесь

var data = [ { project_title: 'test project 44', 
 
    project_ref_id: '113', 
 
    amount: '13000.00', 
 
    months: 'Feb' }, 
 
    { project_title: 'sdsdsd', 
 
    project_ref_id: '112', 
 
    amount: '50000.00', 
 
    months: 'Mar' }, 
 
    { project_title: 'testing123', 
 
    project_ref_id: '104', 
 
    amount: '232323.00', 
 
    months: 'Mar' }, 
 
    { project_title: 'hello wolrd', 
 
    project_ref_id: '111', 
 
    amount: '30000.00', 
 
    months: 'Mar' }, 
 
    { project_title: 'road construction', 
 
    project_ref_id: '108', 
 
    amount: '1000.00', 
 
    months: 'Apr' }, 
 
    { project_title: 'sdsdsd', 
 
    project_ref_id: '112', 
 
    amount: '2000.00', 
 
    months: 'Apr' }, 
 
    { project_title: 'sdsdsd', 
 
    project_ref_id: '112', 
 
    amount: '354357.00', 
 
    months: 'May' } ], 
 
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>