带有 json 数组 c3.js 的列数据

Posted 2023-02-24

【中文标题】带有 json 数组 c3.js 的列数据

【英文标题】：Column data with json array c3.js

【发布时间】：2015-04-19 09:38:25

【问题描述】：

我正在尝试使用 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"

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

【参考方案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