【问题标题】:C3JS - Group dates correctlyC3JS - 正确分组日期
【发布时间】:2017-06-22 09:38:06
【问题描述】:

我正在使用库 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
                }
            }

        });

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

谢谢你, 大卫

【问题讨论】:

    标签: javascript area c3.js


    【解决方案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 轴上一个月只有一个日期。

    【讨论】:

    • 谢谢,我调整了你的想法以符合我的全部逻辑,它似乎有效。
    • 很高兴为您提供帮助!
    • 检查后,如果我使用您的方法,由于没有关联日期,因此图表中不存在与''(空字符串)对应的所有值。
    • 尝试将 axis.x.type 从 'timeseries' 更改为 'categories'。如果问题仍然存在,请制作一个带有数据示例的 jsfiddle 或 codepen。
    猜你喜欢
    • 2020-04-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-03-29
    • 2016-10-21
    相关资源
    最近更新 更多