Question

我尝试使用C3.js创建图表，但是出现了显示json数据的问题。

这是我的数据：

{StatsID: "1", label: "unique-visits", month: "2014-10", value: "17230"},
{StatsID: "2", label: "unique-visits", month: "2014-11", value: "17658"},
{StatsID: "3", label: "unique-visits", month: "2014-12", value: "15624"},
{StatsID: "4", label: "completes", month: "2014-10", value: "5323"},
{StatsID: "5", label: "completes", month: "2014-11", value: "6359"},
{StatsID: "6", label: "completes", month: "2014-12", value: "8216"},
{StatsID: "7", label: "quals", month: "2014-10", value: "552"},
{StatsID: "8", label: "quals", month: "2014-11", value: "318"},
{StatsID: "9", label: "quals", month: "2014-12", value: "332"}

理想情况下，我想要一个折线图，其中每一行代表一个标签，图上的每个点都是一个值。这可能吗？在我将这些数据输入图表时，它只显示所有这些值中的一行。

Answer 1

将json重新格式化为

var jsonObject={
       data:{
              'unique-visits': [17230,17658,15624],
              'completes': [5323,6359,8216],
              'quals': [552,318,332]
            },
       keys:['2014-10', '2014-11', '2014-12']
      }

使用类别轴显示多行

var chart = c3.generate({
   data: {
       json:
          jsonObject.data
   },axis: {
       x: {
           type: 'category',
           categories: jsonObject.keys
       }
   }
});

Demo Example

使用json数组c3.js的列数据

1 个答案: