不正確代highcharts

我JSON格式如下不正確代highcharts

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

獲取數據的月份具有在x軸表示。在y軸上，PROJECT_TITLE作爲名義series，下series

量作爲數據我曾嘗試下面的代碼https://jsfiddle.net/neb22v3j/1/

但圖形產生不正確。它不符合json數據

x軸必須是月份y軸應顯示相對於project_title的金額。我試過的是給其他月份的月份數額。金額與其展示的月份無關。

請幫我解決這個問題

來源

2016-05-31 rji rji

也許'series'陣列並不構成好。您應該在數據數組上使用'Array.prototype.map（）'並將這些對象映射到Highcharts希望看到的任何形式。您能否根據提供的數據顯示串聯陣列的外觀？ – Redu

你想完成這樣的事嗎？我不明白你想如何顯示你的數據[例子]（http://jsfiddle.net/4bsvjzus/1/） –

另外，你的數據中只有1個組合或項目和月份嗎？ –

對於你的觀點被分配到正確的月份，你必須通過null爲沒有數據的所有月份的值。

如果項目沒有當前月份的值，我寫了一個新函數來分析將數據點值設置爲null的數據。（檢查代碼中的註釋）

JSfiddle

來源

2016-05-31 20:48:23

Thanq。有效：） –

-1

我想回答你的問題就在這裏

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>

來源

2016-05-31 21:20:28 Redu

不正確代highcharts

回答

相關問題