Question

我在使用c3js的时间序列处理我的json数据时遇到了问题。现在我收到一些错误，其中最重要的是“错误：属性x的值无效=”NaN“。看来我的x值没有被正确解析，尽管它们在指定的位置格式。可能是什么问题？

代码在这里：

var chart = c3.generate({
          data: {
            json: [
              {"key": "2015-03-27", "value": "261"},
              {"key": "2015-03-28", "value": "177"},
              {"key": "2015-03-29", "value": "145"},
              {"key": "2015-03-30", "value": "145"},
              {"key": "2015-03-31", "value": "145"},
              {"key": "2015-04-01", "value": "146"},
              {"key": "2015-04-02", "value": "125"},
              {"key": "2015-04-03", "value": "125"},
              {"key": "2015-04-04", "value": "133"},
              {"key": "2015-04-05", "value": "89"},
              {"key": "2015-04-06", "value": "89"},
              {"key": "2015-04-07", "value": "87"},         
              {"key": "2015-04-08", "value": "93"},
              {"key": "2015-04-09", "value": "163"},
              {"key": "2015-04-10", "value": "121"},
              {"key": "2015-04-11", "value": "153"},
              {"key": "2015-04-12", "value": "105"},
              {"key": "2015-04-13", "value": "105"},
              {"key": "2015-04-14", "value": "104"},
              {"key": "2015-04-15", "value": "113"},
              {"key": "2015-04-16", "value": "97"},
              {"key": "2015-04-17", "value": "114"},
              {"key": "2015-04-18", "value": "123"},
              {"key": "2015-04-19", "value": "118"},
              {"key": "2015-04-20", "value": "118"},
              {"key": "2015-04-21", "value": "114"},
              {"key": "2015-04-22", "value": "112"},
            ],
            keys: {
              x: 'key',
              xFormat:  '%Y-%m-%d',
              value: ['value']
            },
            type: 'area'
          },
          axis: {
            y: {
              label: { //ADD
                text: 'Y Label',
                position: 'outer-middle'
              }
            },
            x: {
              label: {
                text: 'X Label',
                position: 'outer-center',
                type: 'timeseries',
                tick: {
                  format: '%Y-%m-%d'
                }
              }
            }
          },
          legend: {
            position: 'right'
          },
          padding: {
            bottom: 20
          }
        });

http://jsfiddle.net/ertdnh2m/1/

Answer 1

{"key": "2015-03-27", "value": "261"},

应该是

{"key": 20150327, "value": "261"},

因为它需要一个数字而且-无法解析为数字

Answer 2

axis.x格式错误。只需改变它就可以正常工作：

        x: {
          type: 'timeseries',
          tick: {
            format: '%Y-%m-%d'
          },
          label: {
            text: 'X Label',
            position: 'outer-center'
          }
        }

c3js json时间序列问题

2 个答案: