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"};

当我在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没有获得绘制图表的有效数据。因此，我想知道将动态数据传递到折线图的正确方法。

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"}]

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

1 个答案: