Highcharts：显示两条线而不是一条线

Question

我正在与 highcharts.js

合作

问题是在创建图表时显示两条线而不是一。

它应该只显示一条线 因为它绘制了 2 个值之间的图形这是（时间戳和值）。

你能检查一下为什么它显示两行而不是一行吗？我该如何解决这个问题：

（只需将代码复制并粘贴到文件中即可）。

<!DOCTYPE html>
<html>

<head>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

</head>

<body style="background:#212224;">

<div id="container" style="max-width: 1666px;  margin: 0 auto"></div>

<script type="text/javascript">

    $.getJSON('https://dl.dropboxusercontent.com/u/76618626/data4.json', function (data) {
        console.log("data size is : ");
        console.log(data);      

        var data3 = [];

                    $.each(data.data,function(i,d){
                    console.log(new Date(d.timestamp).getTime(), d.value);

                        data3.push([new Date(d.timestamp).getTime(),d.value]);

                    });

                    console.log("Data 3 is :");
                    console.log(data3);
                    var data4 = [];
                    Highcharts.each(data3, function(p, i) {
                        if (typeof p[0] !== 'number' || typeof p[1] !== 'number') {
                             console.log('Invalid data is :')
                             console.log(p);
                        } else {
                            data4.push(p);
                        }
                    });



        $('#container').highcharts({

            chart: {
            backgroundColor: '#000000',
                },

            title: {
                text: 'Test Graph',
                style: {
                color: '#FFFFFF',
                fontWeight: 'bold'
                }
            },
            xAxis: {
                type: 'datetime',
                title: {
                    text: 'Time Stamp'
                },
                gridLineColor: 'grey',
                gridLineWidth: 1,
                lineWidth:1

            },
            yAxis: {
                title: {
                    text: 'Value'
                },
                gridLineColor: 'grey',
                gridLineWidth: 1,
                lineWidth:1
            },
            legend: {
                enabled: true
            },

            exporting: false,



            plotOptions: {
                line: {                 
                    lineColor: 'red',
                    fillOpacity: 1,                    
                    lineWidth: 2,
                    states: {
                        hover: {
                            lineWidth: 2
                        }
                    },
                    threshold: null,
                    marker: {
                        fillColor: '#e57255'
                        }


                },


            },


            series: [{
                type: 'line',
                name: 'test',
                data: data4
            }]
        });
    });

</script>
</body>
</html>

Answer 1

我在 jsFiddle 中重写了您的代码。它实际上是一个单折线图。

在 console.log(new Date(d.timestamp).toString(), d.value); 查看打印件。

您数据的时间戳从 Tue Jul 05 2016 03:00:00 开始，增加到 Thu Jul 07 2016 03:00:00，然后再次从 Jul 05 2016 03:00:00 开始。

因此，这就是为什么您的图表看起来像两线图的原因。该行的底部正在链接回顶部行。

只需更新您的数据 JSON 就可以了。

已编辑:

更新我的 fiddle 以使用 .sort() 安排时间戳。

Highcharts：显示两条线而不是一条线

High Charts : Two lines showing instead of one

javascript

jquery

frontend

highcharts