falsche Generation von highcharts

Question

I-Daten, wie unten

<?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"}]'; ?> 

Die Monate im JSON-Format bin immer muss in x-Achse dargestellt. In y-Achse, project_title als Name unter series, Menge als Daten unter series

Ich habe den Code unten versucht https://jsfiddle.net/neb22v3j/1/

Aber die Grafik erzeugt falsch ist. Es stimmt nicht mit den JSON-Daten überein.

Die x-Achse muss der Monat sein, auf der y-Achse den Wert für den project_title anzeigen soll. Was ich versucht habe, ist, einen Monat in einen anderen Monat zu investieren. Der Betrag ist für den Monat, in dem er angezeigt wird, nicht relevant.

Bitte helfen Sie mir das Problem zu beheben

Answer 1

Für Ihren Punkt auf den richtigen Monat zugewiesen werden Sie null als Wert für alle Monate passieren müssen, die Daten nicht hat.

Ich schrieb eine neue Funktion zum Parsen der Daten, die den Datenpunktwert auf null setzt, wenn das Projekt keinen Wert für den aktuellen Monat hat. (Überprüfen Sie die Kommentare im Code)

JSfiddle

Answer 2

ich die Antwort auf Ihre Frage erraten ist hier

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>