不正确代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

回答

相关问题