Как отправить динамические данные в угловую линейную диаграмму 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"}]