如何使用c3js在X轴上绘制一周的间隔？

Question

我想用c3.js库绘制一个图形，在x轴上显示一周的间隔，如下图所示：

我有一个JSON文件，其中包含我想要使用的几个日期：

{
    "foo": 1,
    "date": "2016-09-20"
},
{
    "foo": 2,
    "date": "2016-09-21"
},
{
    ...
}

我该怎么做？

Answer 1

我会说这是一个评论，但我不能，所以我的建议是使用d3.js而不是c3.js创建这个折线图。这是一个非常好的教程Setting up axes in d3.js，它将生成上面的图表，您可以根据需要自定义x轴。 weekly x axis

Answer 2

我发现了这个问题的答案。 我的JSON数据有一个名为“weekDetails”的字段，其中包含一个带有周间隔的字符串，如每个寄存器的“Sep 22-28”。记住这些信息，我必须调用类似下面的函数来加载json并指定X轴的键值，即“weekDetails”

chart.load({
    json: myJson,
    keys: {
        x: 'weekDetails',
        value: ['value1', 'value2', 'value3']
    }

});

之后，你必须在c3.generate（）函数中将属性x：更改为'category'，如下所示：

axis: {
    x: {
        type: 'category'
    }
}

我的json文件就像：

{
    "foo": "foo",
    "weekDetails": "Sep 1-7"
},
{
    "foo": "foo",
    "weekDetails": "Sep 8-15"
},
{
    "foo": "foo",
    "weekDetails": "Sep 16-23"
}...