Question

这是我的json数据

[
    {
        "project_title":"sdsdsd",
        "project_ref_id":"112",
        "amount":"232323.00",
        "months":"Mar-2015"
    },{
        "project_title":"test project 44",
        "project_ref_id":"113",
        "amount":"13000.00",
        "months":"Feb-2016"
    },{
        "project_title":"sdsdsd",
        "project_ref_id":"112",
        "amount":"50000.00",
        "months":"Mar-2016"
    },{
        "project_title":"hello wolrd",
        "project_ref_id":"111",
        "amount":"30000.00",
        "months":"Mar-2016"
    },{
        "project_title":"sdsdsd",
        "project_ref_id":"112",
        "amount":"2000.00",
        "months":"Apr-2016"
    },{
        "project_title":"road construction",
        "project_ref_id":"108",
        "amount":"1000.00",
        "months":"Apr-2016"
    },{
        "project_title":"road construction",
        "project_ref_id":"108",
        "amount":"299090.00",
        "months":"May-2016"
    },{
        "project_title":"sdsdsd",
        "project_ref_id":"112",
        "amount":"384357.00",
        "months":"May-2016"
    },{
        "project_title":"road construction",
        "project_ref_id":"108",
        "amount":"2365236.00",
        "months":"Jun-2016"
    }
]

我正在尝试生成一个x轴为月的高图表，y轴为

这是我尝试http://jsfiddle.net/4bsvjzus/5/

的代码

生成的图表是正确的，但该行中存在破损。

如果您在上面的小提琴代码中看到。名为project1的项目在232323中的mar-2015和50000中的mar-2016，2000中的apr-2016，{{{在384357中的1}}。may-2016中没有项目project1的数据，因此图表在feb-2016处断开，而feb-2016的数据为feb-2016其他项目。

因此，每当特定月份没有数据时，图表就会中断并从具有数据的月份开始继续。

图表不能在中间打破。如果一个月没有数据，则图表必须显示该月的值为0的点

Answer 1

我记得几天前回答a very similar question of you。它也有稀疏的y值问题来打破图形。我在这里复制了相同的解决方案，显然效果很好。 (new Array(months.length)).fill(0).map((e,i) => i === months.indexOf(c.months) ? c.amount*1 : e)行负责形成一个填充零的初始数组，并带有月份索引位置的值。（即指数11的指数0 Dec值的Jan值）

var data = [{"project_title":"sdsdsd","project_ref_id":"112","amount":"232323.00","months":"Mar-2015"},{"project_title":"test project 44","project_ref_id":"113","amount":"13000.00","months":"Feb-2016"},{"project_title":"sdsdsd","project_ref_id":"112","amount":"50000.00","months":"Mar-2016"},{"project_title":"hello wolrd","project_ref_id":"111","amount":"30000.00","months":"Mar-2016"},{"project_title":"sdsdsd","project_ref_id":"112","amount":"2000.00","months":"Apr-2016"},{"project_title":"road construction","project_ref_id":"108","amount":"1000.00","months":"Apr-2016"},{"project_title":"road construction","project_ref_id":"108","amount":"299090.00","months":"May-2016"},{"project_title":"sdsdsd","project_ref_id":"112","amount":"384357.00","months":"May-2016"},{"project_title":"road construction","project_ref_id":"108","amount":"2365236.00","months":"Jun-2016"}],
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>

高图代的破损

1 个答案: