highcharts 生成不正确答案

【问题标题】：incorrect generation of highchartshighcharts 生成不正确
【发布时间】：2016-05-31 13:36:14
【问题描述】：

我正在获取以下 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"}]'; ?>

月份必须以 x 轴表示。在 y 轴上，series 下的 project_title 作为名称，金额为series下的数据

我试过下面的代码https://jsfiddle.net/neb22v3j/1/

但生成的图表不正确。它与json数据不匹配

x 轴必须是月份 y 轴应根据 project_title 显示金额。我尝试的是将一个月的金额分配给其他月份。该金额与其显示的月份无关。

请帮我解决问题

【问题讨论】：

可能series 数组构造不好。您应该在数据数组上使用Array.prototype.map()，并将对象映射到 Highcharts 期望看到的任何形式。您能否根据提供的数据显示系列数组的外观？
你想完成这样的事情吗？我不明白您希望如何显示您的数据Example
另外，您的数据中是否只有 1 个组合或项目和月份？

标签： javascript jquery arrays json highcharts

【解决方案1】：

为了将您的点分配给正确的月份，您必须将 null 作为所有没有数据的月份的值。

如果项目没有当前月份的值，我编写了一个新函数来解析将数据点值设置为null 的数据。（查看代码中的cmets）

JSfiddle

【讨论】：

【解决方案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>

【讨论】：