c3 图键值对答案

【问题标题】：c3 graph key value pairc3 图键值对
【发布时间】：2018-03-08 21:49:26
【问题描述】：

所以我的大脑处于关闭状态。

我有一个接受数字数组的 c3 图表，因此它可以在图表上显示条形图。我无法将来自后端的数据动态解析到这些数组中。

我有三个变量

var inp = graphNums.inProgress;
var rec = graphNums.received;
var att = graphNums.attention;

生成键值对中的数据，如下所示

{group1: 3, group2: 0, group3: 0}

这些组与图表底部的 x 访问相匹配，执行类似的操作。

for (i in inp) {
        if (inp.hasOwnProperty(i)) {
            cat.push(i)
        }
    }
    cat.unshift('x'); //x needs to be there for the graph to work

这就是问题所在。该图只接受这样的值。

['Rec', 5, 1, 4, 8, 5, 3],
['InP', 7, 2, 7, 9, 7, 3],
['Res', 10, 5, 2, 9, 5, 2],

在我的一生中，我无法弄清楚如何让键值对与这个数组匹配。任何帮助将不胜感激。

带有完整图表和示例的 jsfiddle。 http://jsfiddle.net/17sqrnec/5/

【问题讨论】：

我在检查你的小提琴。你能再解释一下变量inp、rec 和res 的含义/代表吗？还有什么是cat 的有效值
@J.M.Echevarría 这些是处于该状态的未清项目。因此对于 group1，它将有一个 inp、rec 和一个 res 栏。这些类别在那个小提琴中实际上是正确的。每个组将是图表底部的一个新类别。我可能会加入多个小组，多达 30 个或更多，我不喜欢这样。
最后一件事，AFAI 明白，for 循环只是获取 x 轴（group1、group2 和 group3）的索引，所以在 var inp = {group1: 3, group2: 0, group3: 0}; 中是什么数字3、0和0是什么意思。同样在['Rec', 5, 1, 4, 8, 5, 3], 中，5, 1, 4, 8, 5 和 3 是干什么用的？ ['InP', 7, 2, 7, 9, 7, 3] 和 ['Res', 10, 5, 2, 9, 5, 2] 也是如此，因为我看到并非所有这些都显示在悬停时

标签： javascript jquery c3.js

【解决方案1】：

我建议在这里查看文档：http://c3js.org/samples/data_json.html 您将找到可用于类别的 JSON 格式，例如：

{category: 'cat1', group1: 3, group2: 0, group3: 0}

【讨论】：

我已经看过了。不过，我无法让它与图表底部的类别一起使用。
也许类似：['Rec', rec.group1, rec.group2, rec.group3], ['InP', inp.group1, inp.group2, inp.group3], ['Res', res.group1, res.group2, res.group3] 可以解决您的问题？
不幸的是，这在这种情况下不起作用，因为我不知道类别将是什么，直到我将它们从第一个值中取出并将它们放入数组中。我可以像上面那样拥有三个，或者我可以拥有 30 个。

【解决方案2】：

您需要提供一个带有x 类别/标签的数组其余数组将被视为带有前导标签的 data，与定义的 x 类别匹配

一个工作小提琴：http://jsfiddle.net/17sqrnec/45/

【讨论】：

这有点工作。不过，让我感到困惑的一件事是，底部访问需要读取“group1”、“group2”、“group3”、ext 而不是 lblInp、lblRec、lblRes