javascript - 谷歌折线图正在绘制额外的线条

Question

我有一个折线图来绘制多个值，但它绘制了额外的带 Angular 线，我检查了我的数据没有重复项。这是它的样子:

我的图表选项很简单:

var options = {
    "legend": { "position": "top"},
    "hAxis": {
        title: "Time of Day"
    },
    vAxis: {
        "textPosition": "out",
        textStyle: {color: '#328332'},
        title: "Voltage (V)",
        titleTextStyle: {color: '#328332'},
    }
}


var chartId = 'records-chart';
var dt = new google.visualization.DataTable();
dt.addColumn('datetime', 'Date');
dt.addColumn('number', 'Voltage');
var data = [];
for (var i = 0; i < $scope.data.length; i++) {
        data[i] = [
            $scope.data[i].time,
            $scope.data[i].voltage,
        ];
}
dt.addRows(data);

var chart = new google.visualization.LineChart(document.getElementById(chartId));
chart.draw(rtRecordsDataTable, options);

为什么图表以这种奇怪的行为连接数据？我能做些什么来避免它？

Answer 1

看起来您需要按第一列(日期)对数据进行排序，
在绘制图表之前...

dt.addRows(data);

dt.sort([{column: 0}]);

var chart = new google.visualization.LineChart(document.getElementById(chartId));
chart.draw(rtRecordsDataTable, options);