Question

我是Highcharts JS的新手。我在绘图＆＃34; processed_json4＆＃34;中发现了一个问题。所有其他4个图（processed_json到processed_json3）出现在图表上。任何帮助将不胜感激。

我初始化了5个数组，并将从JSON文件接收的数据推送到这些数组中。然而，第五个情节没有出现。

＆＃13;

    <!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>

＆＃13;

new4.json看起来像这样：

[ { ＆＃34; temperSensorData＆＃34;：＆＃34; 26.183021749996204＆＃34;，＆＃34; temperSensorUnit＆＃34;：＆＃34;摄氏度＆＃34;，＆＃34; timestamp＆＃34;：＆＃34; 1370718629809＆＃34;，＆＃34; timestamp2＆＃34;：＆＃34; 1272913900562＆＃34;，＆＃34; timestamp3＆＃34;：＆＃34; 1272914212663＆＃34;，＆＃34; val＆＃34;：0 }， { ＆＃34; temperSensorData＆＃34;：＆＃34; 26.183021749996204＆＃34;，＆＃34; temperSensorUnit＆＃34;：＆＃34;摄氏度＆＃34;，＆＃34; timestamp＆＃34;：＆＃34; 1370718629809＆＃34;，＆＃34; timestamp2＆＃34;：＆＃34; 1272923870899＆＃34;，＆＃34; timestamp3＆＃34;：＆＃34; 1272923910916＆＃34;，＆＃34; val＆＃34;：1 }，。。。{} ]

Highcharts其中一个图形不显示/绘制

0 个答案: