C3JS - 组日期正确

时间:2017-06-22 09:38:06

标签: javascript area c3.js

我正在使用库c3js来显示区域图表。 我的日期数据有问题。我有很多约会(+/- 1000),我想正确分组我的约会。

这是我的实现渲染: [1]

您可以看到某些日期在x轴上出现两次。

以下是我的图表代码:

var usedList = JSON.parse(usedList);
        var format = informations[0];
        var counts = informations[1];

        var amounts = new Array('Evolution');
        var dates = new Array("x");

        for (var i = 0; i < usedList.length; i++)
        {
            amounts.push(usedList[i].price);
            dates.push(usedList[i].date);
        }

var chart = c3.generate({
            bindto : '#js-chart',
            size : {
                height : 220
            },
            area: {
                  zerobased: false
                },
            data : {
                selection : {
                    draggable : false
                },
                x : 'x',
                columns : [ dates, amounts ],
                types : {
                    Evolution : 'area'
                },
                colors : {
                    Evolution : '#143FB4'
                }
            },
            axis : {
                x : {
                    type : 'timeseries',
                    tick : {
                        fit: true,
                        format : format
                    },
                    padding: {
                      left: 0,
                      right: 0,
                    }
                }
            },
            point : {
                r : 0
            },
            grid : {
                y : {
                    show : true
                }
            }

        });

您认为我如何重新组合日期以便每个月重复一次?

谢谢你, 大卫

1 个答案:

答案 0 :(得分:1)

如果只推送一个月的一个日期怎么办?

    for (var i = 0; i < usedList.length; i++)
    {
        amounts.push(usedList[i].price);

        // replacing existing dates with empty string, keeping array size
        var d = usedList[i].date;
        dates.push(dates.indexOf(d) == -1 ? d : '');
    }

如果日期存储为“MM / YYYY”,这应该有效。 如果日期以不同的格式存储,则需要进行不同的检查。 但总体思路保持不变 - 在x轴上只有一个月的一个日期。