google 折线图正在绘制额外的线条

Question

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

我的图表选项很简单：

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);

google 折线图正在绘制额外的线条

google line chart is drawing extra lines

javascript

charts

linechart

google-visualization