Question

我对Highcharts很新。我的高级图表的数据来自JSON文件。它是一个大约32个元素的数组。

有没有办法在加载时渲染前8个点并继续每秒一个接一个地添加剩余点？

我知道这可以通过series.addPoint（,,）方法实现。我不知道如何以及在哪里将其包含在我的代码中以使其工作。

非常感谢任何帮助。谢谢！

 <!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Highcharts data from JSON Response</title>
        <style>
        body{
            margin-top: 30px;
            margin-left:10px;
        }
        </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>      
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script type="text/javascript">
        $(function () {
                var processed_json = new Array();   //TS1
                var processed_json1 = new Array();  //TS2 
                var processed_json2 = new Array();  //TS3
                var processed_json3 = new Array();  //Processing Delay
                var processed_json4 = new Array();  //Input-Output Delay                
                $.getJSON('http://localhost:8080/charts_demo/new4.json', function(data) {
                    // Populate series
                    for (i = 0; i < data.length; i++){


                    processed_json.push([data[i].timestamp1, data[i].val]);
                    processed_json1.push([data[i].timestamp2, data[i].val]);
                    processed_json2.push([data[i].timestamp3, data[i].val]);
                    processed_json3.push([((data[i].timestamp3)-(data[i].timestamp2)), data[i].val]);
                    processed_json4.push([((data[i].timestamp3)-(data[i].timestamp1)), data[i].val]);
                    }

                    // draw chart
                    $('#container').highcharts({
                    chart: {
                        type: "line"
                    },
                    title: {
                        text: "Streaming Flink Data"
                    },
                    xAxis: {
                        type: 'category',
                        allowDecimals: true,
                        title: {
                            text: "Timestamps"
                        }
                    },
                    yAxis: {
                        title: {
                            text: "Steps"
                        }
                    },

                    series: [{
                        name: 'Timestamp1',
                        data: processed_json
                    },
                        {
                            name: 'Timestamp2',
                            data: processed_json1
                    } ,
                        {
                        name: 'Timestamp3',
                        data: processed_json2,
                    },
                        {
                        name: 'Processing Delay',
                        data: processed_json3,
                    },
                        {
                        name: 'Input-Output Delay',
                        data: processed_json4,
                    }

                    ]
                }); 
            });
        });
    </script>
</head>
<body>
   <div style="width: 800px; margin: 2em auto; padding: 1em; border: 1px solid red; border-radius: 0.5em">
    Highcharts data load from a JSON using manual JSON Processing
    </div>
    <div id="container" style="height: 400px"></div>

</body>
</html>

以下是我的JSON的一部分：

[
    {
        "temperSensorData": "26.183021749996204",
        "temperSensorUnit": "celsius",
        "timestamp": "1370718629809",
        "timestamp2": "1272913900562",
        "timestamp3": "1272914212663",
        "val": 0
    },
    {
        "temperSensorData": "26.183021749996204",
        "temperSensorUnit": "celsius",
        "timestamp": "1370718629809",
        "timestamp2": "1272923870899",
        "timestamp3": "1272923910916",
        "val": 1
    },
    {
        "temperSensorData": "26.183021749996204",
        "temperSensorUnit": "celsius",
        "timestamp": "1370718629809",
        "timestamp2": "1272924061471",
        "timestamp3": "1272924083986",
        "val": 3
    },
    {
        "temperSensorData": "26.183021749996204",
        "temperSensorUnit": "celsius",
        "timestamp": "1370718629809",
        "timestamp2": "1272924164266",
        "timestamp3": "1272924184633",
        "val": 4
    },
    {
        "temperSensorData": "26.183021749996204",
        "temperSensorUnit": "celsius",
        "timestamp": "1370718629809",
        "timestamp2": "1272924268218",
        "timestamp3": "1272924290112",
        "val": 5
    },
    {
        "temperSensorData": "26.183021749996204",
        "temperSensorUnit": "celsius",
        "timestamp": "1370718629809",
        "timestamp2": "1272924379077",
        "timestamp3": "1272924403753",
        "val": 6
    },
    {
        "temperSensorData": "26.183021749996204",
        "temperSensorUnit": "celsius",
        "timestamp": "1370718629809",
        "timestamp2": "1272924506055",
        "timestamp3": "1272924530178",
        "val": 7
    },
    {
        "temperSensorData": "26.183021749996204",
        "temperSensorUnit": "celsius",
        "timestamp": "1370718629809",
        "timestamp2": "1272924618673",
        "timestamp3": "1272924640035",
        "val": 8
    },
    {
        "temperSensorData": "26.183021749996204",
        "temperSensorUnit": "celsius",
        "timestamp": "1370718629809",
        "timestamp2": "1272924724397",
        "timestamp3": "1272924745171",
        "val": 9
    },
    {
        "temperSensorData": "26.183021749996204",
        "temperSensorUnit": "celsius",
        "timestamp": "1370718629809",
        "timestamp2": "1272924824742",
        "timestamp3": "1272924844889",
        "val": 10
    },
    {
        "temperSensorData": "26.183021749996204",
        "temperSensorUnit": "celsius",
        "timestamp": "1370718629809",
        "timestamp2": "2735704061190",
        "timestamp3": "2735704107307",
        "val": 11
    },
    {
        "temperSensorData": "26.183021749996204",
        "temperSensorUnit": "celsius",
        "timestamp": "1370718629809",
        "timestamp2": "2735707965847",
        "timestamp3": "2735708013535",
        "val": 12
    },
    {
        "temperSensorData": "26.183021749996204",
        "temperSensorUnit": "celsius",
        "timestamp": "1370718629809",
        "timestamp2": "2735711252324",
        "timestamp3": "2735711294922",
        "val": 13
    },
    {
        "temperSensorData": "26.183021749996204",
        "temperSensorUnit": "celsius",
        "timestamp": "1370718629809",
        "timestamp2": "2735717187076",
        "timestamp3": "2735717223311",
        "val": 14
    },
    {
        "temperSensorData": "26.183021749996204",
        "temperSensorUnit": "celsius",
        "timestamp": "1370718629809",
        "timestamp2": "2735723635314",
        "timestamp3": "2735723682098",
        "val": 15
    },
    {
        "temperSensorData": "26.183021749996204",
        "temperSensorUnit": "celsius",
        "timestamp": "1370718629809",
        "timestamp2": "2735730238413",
        "timestamp3": "2735730270014",
        "val": 16
    },
    {
        "temperSensorData": "26.183021749996204",
        "temperSensorUnit": "celsius",
        "timestamp": "1370718629809",
        "timestamp2": "2735739320192",
        "timestamp3": "2735739359640",
        "val": 17
    },
    {
        "temperSensorData": "26.183021749996204",
        "temperSensorUnit": "celsius",
        "timestamp": "1370718629809",
        "timestamp2": "2735742926365",
        "timestamp3": "2735742963707",
        "val": 18
    },
    {
        "temperSensorData": "26.183021749996204",
        "temperSensorUnit": "celsius",
        "timestamp": "1370718629809",
        "timestamp2": "2735745756756",
        "timestamp3": "2735745800614",
        "val": 19
    },
    {
        "temperSensorData": "26.183021749996204",
        "temperSensorUnit": "celsius",
        "timestamp": "1370718629809",
        "timestamp2": "2735753411805",
        "timestamp3": "2735753449615",
        "val": 20
    }
]

Answer 1

我已经创建了一个你需要的小提琴here - 我已经简化了这个例子的数据系列

所以基本上你从每个数组中取出前8个点并在创建图表时使用它们：

series: [{
  name: 'Timestamp1',
  data: processed_json.slice(0, 8)

然后，一旦你创建了图表，就需要一个可以每秒调用的函数：

function addPoints(series1, series2) {
  if (series1.length > 0) {
    myChart.series[0].addPoint(series1.shift());
    myChart.series[1].addPoint(series2.shift());
    setTimeout(function() {
      addPoints(series1, series2)
    }, 3000);
  }
}

如果关闭剩下的数据，你就会开始，如下所示：

addPoints(processed_json.slice(8), processed_json1.slice(8));

所以基本上该函数将从数组中获取（并删除）第一个值，并将其添加到数据系列中。然后设置超时以在一秒钟内调用自身。它将继续运行，直到阵列中没有数据。我希望这是有道理的。

顺便说一句，您可能需要再次考虑如何显示此数据 - 您尝试显示时间戳（这是一个巨大的数字）以及它们之间的差异（这是一个非常小的数字）在相同的规模上，这不会真正起作用。

如何在绘制第一个＆＃39; n＆＃39;之后将新点添加到highcharts。点？

1 个答案: