C3js動態加載未知列

我有一個空的時間序列圖與c3js，並希望「動態加載」來自未知地圖的列。C3js動態加載未知列

初始化

var chart = c3.generate({ 
    data: { 
     x: 'ts', 
     xFormat: null, // For millis 
     columns: [] 
    }, 
    axis: { 
     x: { 
      type: 'timeseries', 
      tick: { 
       format: '%Y-%m-%d' 
      } 
     } 
    }, 
    line: { // For enable null values in series (gaps in charts)) 
     connectNull: false 
    } 
});

我添加x軸的值和動態生成的地圖的所有數據：

var tsData = ['ts'].concat(VALUES_FROM_ANOTHER_FUNCTION); 
periodPowerChart.load({ 
    columns: [ 
     tsData 
    ] 
}); 
// opMode looks like [{"1": [null, null, 0, 3, 5]}, {"2": [2, 4, null, null, null]}] 
for (key in opMode) { 
    chart.load({ 
     columns: [ 
      [key].concat(opMode[key]) 
     ] 
    }) 
}

這樣的想法是從opMode加載數據。在我得到的第一次迭代：

Error: x is not defined for id = "1"

3個數組（ts，「1」和「2」具有相同數量的元素）。有任何想法嗎？

來源

2017-09-26 Hugo

您正在向列參數插入無效的數據格式。你應該在列中提供如下所示的內容。

var columnsData = [[ 
    "ts", 
    "2013-01-01", 
    "2013-01-02", 
    "2013-01-03", 
    "2013-01-04", 
    "2013-01-05" 
], 
[ 
    "data1", 
    null, 
    null, 
    0, 
    3, 
    5 
], 
[ 
    "data2", 
    2, 
    4, 
    null, 
    null, 
    null 
]];

我更新了動態列插入邏輯，使數據看起來像上面那樣。這是代碼。

//opMode should look like below with time data. 
var opMode = [{ 
    "ts": ['2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05'] 
}, { 
    "data1": [null, null, 0, 3, 5] 
}, { 
    "data2": [2, 4, null, null, null] 
}]; 

opMode.forEach(function(obj, index) { 
    var key = Object.keys(obj)[0]; 
    var data = [key]; 

    data = data.concat(obj[key]); 

    chart.load({ 
    columns: [ 
     data 
    ] 
    }); 

});

你可以參考這個例子，並與它玩，得到一個好主意。
http://c3js.org/samples/timeseries.html

來源

2017-09-26 09:17:04 Thusitha

是啊！剛纔解決之前，看到您的評論。事實上，這個問題並不涉及數據類型，只需要將所有列連接到一個唯一對象'data'（在你的情況下）並且調用一次'chart.load'函數。謝謝 – Hugo

只是爲了幫助其他方法的其他人。

在我的情況下，問題與加載多次數據有關。只需加入單個陣列中的所有列數據即可解決問題：

var columnsData = []; 
var tsData = ['ts'].concat(VALUES_FROM_ANOTHER_FUNCTION); 
columnsData.push(tsData); 
for (key in opMode) { 
    columnsData.push([key].concat(opMode[key])); 
} 
chart.load({ 
    columns: columnsData 
});

來源

2017-09-26 09:37:54 Hugo

C3js動態加載未知列

回答

相關問題