如何將動態數據發送到c3chart角線折線圖

Question

我想繪製一個折線圖，它在事件上自行更新並加載新數據onClick。

這是我畫的HTML圖表的方式：

<c3chart bindto-id="{{key}}" padding-left="20" 
    padding-right="20" padding-top="20" padding-bottom="20" 
      chart-data="lineChartData[key]" chart-columns="lineChartColumns[key]" 
                  chart-x="lineChartX"> 
    <chart-size chart-width="250" chart-height="270"/> 
    <chart-legend show-legend="false" legend-position="right"/> 
    <chart-events on-click-data="onChange(key,data)"></chart-events> 
</c3chart> 

在控制器中，我定義變量如下：

var chartPoints = {}; 
var chartColumns = []; 
var chartPointsArr = []; 
var chartLinePts = []; 
var chartXAxis =[]; 

showData.forEach(function(s) { 
    if (s.number) { 

     chartLinePts.push(s.count); 
     chartXAxis.push(s.number); 
    } 
}); 

chartPoints["data"] = chartLinePts; 
chartPoints["x"] = chartXAxis; 
chartPointsArr.push(chartPoints); 

var chartColumnEntry = {}; 
chartColumnEntry['id'] = "data"; 
chartColumnEntry['type'] = 'line'; 
chartColumns.push(chartColumnEntry); 


console.log(chartPointsArr); 
console.log(chartColumns); 

$scope.lineChartData[key] = chartPointsArr; 
$scope.lineChartColumns[key] = chartColumns; 
$scope.lineChartX = {"id":"x","name":"data"}; 

當我打印lineChartData，lineChartColumns和lineChartX在HTML中，我得到以下內容：

[{"data":[100,500,200,400,100],"x":[0,10,20,30,40]}] 

[{"id":"data","type":"line"}] 

{"id":"x","name":"data"} 

但這個數據不繪製圖表，我得到一個錯誤說：

d3.js:669 Error: Invalid value for <g> attribute transform="translate(NaN, 0)" 

我明白d3沒有得到有效的數據，繪製圖表。因此，我想知道將動態數據傳遞給折線圖的正確方法。

Answer 1

看着少的資源後，我發現，將數據發送到c3chart用於繪製折線圖的方式之一，如下圖所示：

var chartColumns = []; 
var chartPointsArr = []; 
var chartXAxis =[]; 

showData.forEach(function(s) { 
    if (s.number) { 

     var chartPoints = {}; 
     chartPoints["data"] = s.count; 
     chartPoints["x"] = s.number; 

     chartPointsArr.push(chartPoints); 
    } 
}); 

var chartColumnEntry = {}; 
chartColumnEntry['id'] = "data"; 
chartColumnEntry['type'] = 'line'; 
chartColumns.push(chartColumnEntry); 

$scope.lineChartData[key] = chartPointsArr; 
$scope.lineChartColumns[key] = chartColumns; 
$scope.lineChartX = {"id":"x","name":"data"}; 

所以，當我在HTML打印它，它看起來像：

{"data":100,"x":0},{"data":500,"x":10},{"data":200,"x":20},{"data":400,"x":30},{"data":100,"x":40}] 

[{"id":"data","type":"line"}]