我可以将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。