Javascript 如何将动态数据发送到c3chart角折线图

我想画一个折线图，它会在事件中自动更新并加载新数据

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>

当我在HTML中打印

lineChartData

、

lineChartColumns

和

lineChartX

时，我得到以下信息：

[{"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.js:669错误：属性transform=“translate（NaN，0）”的值无效

---

我知道

d3

没有获得绘制图表的有效数据。因此，我想知道将动态数据传递给折线图的正确方法

查看了一些参考资料后，我发现将数据发送到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"}]

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

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