我可以将 javascript 对象数据渲染到 c3js 图表中吗？

Question

我使用c3js 库制作图表。通常当我点击图例时，它只显示图例数据。

现在，我想在单击图例时添加新的 Simple Moving Average 数据而不删除现有数据。

这是我想要的示例图片，

如果单击 dept1 图例，我想向图表添加新的 SMV 值。

这是我试过的，

function show_svm(data) {
        chart.load({
            bindto: '#chart',
            x: 'date',
            xFormat: m_d_format,
            json: data,
            keys: {
                x: 'date',
                value:  ['Dept1','Dept2','Dept3', 'Dept4','SMV']
                }
            });
        }

在函数参数中data是这样的，

{
    'date':["2015-11-23","2015-11-24","2015-11-25","2015-11-26","2015-11-27","2015-11-30","2015-12-01","2015-12-02","2015-12-03","2015-12-04","2015-12-08","2015-12-09","2015-12-11","2015-12-14","2015-12-15","2015-12-16","2015-12-17","2015-12-18","2015-12-19","2015-12-21","2015-12-22","2015-12-23","2015-12-24","2015-12-25","2015-12-28","2015-12-29","2015-12-30","2016-01-04","2016-01-05","2016-01-06","2016-01-07","2016-01-08","2016-01-09","2016-01-11","2016-01-12","2016-01-13","2016-01-14","2016-01-15","2016-01-18","2016-01-19","2016-01-20","2016-01-21","2016-01-22","2016-01-23","2016-01-24","2016-01-25","2016-01-26","2016-01-27","2016-01-28","2016-01-29","2016-02-01","2016-02-02","2016-02-03","2016-02-04","2016-02-05","2016-02-08"],
    'Dept1':["100.00","50.00","57.14","71.43","100.00","42.86","85.71","85.71","71.43","66.67","33.33","100.00","50.00","57.14","66.67","71.43","100.00","57.14","0.00","28.57","57.14","66.67","57.14","57.14","71.43","57.14","57.14","71.43","71.43","71.43","85.71","83.33","100.00","42.86","57.14","57.14","66.67","100.00","71.43","100.00","71.43","14.29","28.57","100.00","50.00","28.57","57.14","57.14","57.14","100.00","42.86","57.14","71.43","71.43","42.86","71.43"],
    'SMV':[null,null,null,null,null,null,null,70.407142857143,73.468571428571,74.83,69.387142857143,69.387142857143,70.407142857143,66.325714285714,63.605714285714,63.605714285714,68.367142857143,71.768571428571,57.482857142857,54.421428571429,54.421428571429,54.421428571429,52.38,46.257142857143,48.298571428571,56.461428571429,60.542857142857,62.584285714286,63.264285714286,65.305714285714,69.387142857143,71.087142857143,77.21,75.17,73.128571428571,71.087142857143,70.407142857143,72.448571428571,70.748571428571,70.748571428571,74.83,68.708571428571,64.627142857143,69.388571428571,62.245714285714,56.122857142857,50,47.958571428571,54.08,64.284285714286,56.121428571429,57.141428571429,63.264285714286,65.305714285714,63.265714285714,65.307142857143]
}

这个data来自ajax。但是，此 SVM 数据无法在图表上呈现，而且我没有收到任何错误。我不知道为什么。

我想知道的另一件事是，我可以像这样使用 javascript 对象到 c3js 图表的 json：json:data,。这是正确的方法吗？我非常感谢任何建议。

Answer 1

您的代码中只有一些错误。首先，您使用了属性 json。要使用该属性，您的数据需要采用以下形式：

var data = [
    { 'date': '2015-01-01', 'Dept1': null, 'SMV': 3},
    { 'date': '2015-01-02', 'Dept1': 1, 'SMV': 4}
];

但是您的数据看起来不一样。您将所有 date、Dept1 和 SMV 数据分隔到单独的数组中。方法如下：数据应包含一个数组，其中包含多个数组。第一个参数定义为数据集的键。示例数据集如下所示：

var data = [
    ['date', '2015-01-01', 2015-01-02'],
    ['Dept1', null, 1],
    ['SMV', 3, 4]
];

您也不再需要 keys 属性。

最后，您忘记在 jsFiddle 中添加 c3 和 d3 依赖项，导致错误 c3 is not defined。您可以在此处找到 jsFiddle 的固定示例：jsFiddle.

我可以将 javascript 对象数据渲染到 c3js 图表中吗？

Can I rendered javascript object data into c3js chart?

javascript

c3.js