Multichart krispo显示曲线而不是直线

时间:2017-02-27 12:43:16

标签: nvd3.js angular-nvd3 angularjs-nvd3-directives

在我的角度应用中,我使用了Krispo Multichart图。我在哪里得到一些奇怪的图形点。

见下面的截图:

更新

截屏1:

enter image description here

截屏2:

enter image description here

截屏3:

enter image description here

在上面的屏幕截图中,数据每隔几分钟就会进入(我预期的是)。数据似乎是正确的。

这是我的选项:

$scope.options_line = {
    chart: {
        type: 'multiChart',
        yDomain1: [0, 250],
        yDomain2: [0, 0],
        height: 260,
        width: 550,
        margin: {
            top: 10,
            right: 50,
            bottom: 50,
            left: 60
        },
        x: function (d) {
            return d.x;
        },
        y: function (d) {
            return d.y;
        },

        text: function (d) {
            return d.x;
        },
        color: d3.scale.category10().range(),
        showValues: true,
        valueFormat: function (d) {
            return d3.format('f')(d);
        },
        duration: 500,
        xAxis: {
            axisLabel: 'Time',
            tickFormat: function (d) {
                return d3.time.format('%H:%M')(new Date(d));
            }
        },
        yAxis1: {
            axisLabelDistance: 0,
            axisLabel: 'Voltage [ V ]',
            tickFormat: function (d) {
                return d3.format('f')(d);
            }
        },
        yAxis2: {
            axisLabelDistance: 0,
            axisLabel: 'Current [ A ]',
            tickFormat: function (d) {
                return d3.format('f')(d);
            },
            width: 50,
        },
        interactive: true,
        tooltip: {
            contentGenerator: function (e) {
                //return html content
                //console.log(e);
                //console.log($scope.tooltip_format);
                var data = e;
                console.log(data.point.y);
                var series = e.series[0];
                if($scope.set_offset_val) { $scope.xtime = data.point.x - $scope.set_offset_val} else {
                $scope.xtime = data.point.x;    
                }
                return '<h3>' + series.key + '</h3>' +
                    '<p>' + parseFloat(data.point.y).toFixed(2) + ' at ' + $filter('date')($scope.xtime, $scope.tooltip_format) + '</p>'
            }
        }
    }
};

和JSON数据:

[{
    "yAxis": 1,
    "values": [{
        "x": "1487939640000",
        "y": "150"
    }, {
        "x": "1487939700000",
        "y": "150"
    }, {
        "x": "1487939760000",
        "y": "150"
    }, {
        "x": "1487939820000",
        "y": "151"
    }, {
        "x": "1487939880000",
        "y": "151"
    }, {
        "x": "1487939940000",
        "y": "151"
    }, {
        "x": "1487940000000",
        "y": "151"
    }, {
        "x": "1487940060000",
        "y": "151"
    }, {
        "x": "1487940660000",
        "y": "168"
    }, {
        "x": "1487940720000",
        "y": "169"
    }, {
        "x": "1487940840000",
        "y": "165"
    }, {
        "x": "1487942100000",
        "y": "165"
    }, {
        "x": "1487942160000",
        "y": "165"
    }, {
        "x": "1487942220000",
        "y": "154"
    }, {
        "x": "1487942280000",
        "y": "165"
    }, {
        "x": "1487942340000",
        "y": "165"
    }, {
        "x": "1487942400000",
        "y": "165"
    }, {
        "x": "1487942460000",
        "y": "165"
    }, {
        "x": "1487942520000",
        "y": "165"
    }, {
        "x": "1487942580000",
        "y": "165"
    }, {
        "x": "1487942640000",
        "y": "165"
    }, {
        "x": "1487942700000",
        "y": "165"
    }],
    "type": "line",
    "key": "PVVoltage"
}, {
    "yAxis": 2,
    "values": [{
        "x": "1487939640000",
        "y": "4"
    }, {
        "x": "1487939700000",
        "y": "4"
    }, {
        "x": "1487939760000",
        "y": "2.3"
    }, {
        "x": "1487939820000",
        "y": "2.1"
    }, {
        "x": "1487939880000",
        "y": "1.6"
    }, {
        "x": "1487939940000",
        "y": "1"
    }, {
        "x": "1487940000000",
        "y": "1.5"
    }, {
        "x": "1487940060000",
        "y": "0.1"
    }, {
        "x": "1487940660000",
        "y": "3.5"
    }, {
        "x": "1487940720000",
        "y": "0.1"
    }, {
        "x": "1487940840000",
        "y": "0.5"
    }, {
        "x": "1487942100000",
        "y": "2"
    }, {
        "x": "1487942160000",
        "y": "0.2"
    }, {
        "x": "1487942220000",
        "y": "3.2"
    }, {
        "x": "1487942280000",
        "y": "0"
    }, {
        "x": "1487942340000",
        "y": "0"
    }, {
        "x": "1487942400000",
        "y": "0"
    }, {
        "x": "1487942460000",
        "y": "0"
    }, {
        "x": "1487942520000",
        "y": "0.1"
    }, {
        "x": "1487942580000",
        "y": "0.1"
    }, {
        "x": "1487942640000",
        "y": "0"
    }, {
        "x": "1487942700000",
        "y": "0"
    }],
    "type": "line",
    "key": "PVCurrent"
}]

预期图表中不应包含曲线,因为这是折线图。我的案例点已经一次又一次地离开然后再上升。

任何人都知道为什么会这样吗?以及如何解决这个问题。

0 个答案:

没有答案