C3JS - 正确分组日期

Question

我正在使用库 c3js 来显示面积图。我的日期数据有问题。我有很多日期 (+/- 1000)，我想正确地分组我的日期。

这是我的实际渲染： [

您可以看到一些日期在 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
                }
            }

        });

你认为我可以如何重新组合日期以便每个月只重复一次？

谢谢，大卫

Answer 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 轴上一个月只有一个日期。

C3JS - 正确分组日期

C3JS - Group dates correctly

javascript

area

c3.js