带有传入 Json 数据的 Highcharts 实时图表 [已修复 []答案

【问题标题】：Highcharts real time chart with incoming Json data [FIXED[]带有传入 Json 数据的 Highcharts 实时图表 [已修复 []
【发布时间】：2018-02-07 14:25:39
【问题描述】：

您好，我正在使用来自单个 json 数据的多个图表，我无法用传入的 json 数据填充 highcharts 数据系列。我已经按照 highchart 手册使用了 ajax，它没用。我需要将前 2 个 json 数据输入到 Chart 1 ，接下来的 3 个数据输入到 chart 2 ，最后一个数据输入到 chart 3 。这是我传入的 json 数据。

{
    "male": 7,
    "female": 74,
    "loc1": 28,
    "loc2": 3,
    "loc3": 0,
    "count1": 5,
    "count2": 5,
    "count3": 8,
    "temp1": 8,
    "temp2": 22
}

这是图表 1 的 Highcharts 格式

<script>
Highcharts.chart({
    chart: {
        type: 'column',
		renderTo : 'chart1',
		backgroundColor: "#000",
        },    
	   plotOptions: {
        column: {
			  pointPadding: 0.2,
              borderWidth: 0,        
        }
    },
	 xAxis: {
        categories: ['Male' ,'Female'],
		   labels: {
                style: {
 			     fontSize: '20px'				
                }
            },
       },
    yAxis: {
           labels: {
                style: {
                 color: 'rgba(255,206,202,0.9)',
			     fontSize: '20px'
                }
            },
        min: 0 ,
		 title: {
            text: null
        }
    },   
    series: [{
             data: [{y: 2, color: 'rgba(255,90,60,1)'}, {y:5, color: 'rgba(255,170,200,1)'}]
        }
		]
});		
</script>

这个 ajax 代码来自 Highcharts Demo，

function requestData() {
    $.ajax({
        url: 'json.php',
		dataType: 'json',
        success: function(point ) {
			 
			chart.series[0].addPoint({color: "#000", name: "Adding A Point",value: "$ 1234.00", y: 1234.00});
    
   

            
            // call it again after one second
            setTimeout(requestData, 1*1000);    
        },
        cache: false
    });
	}

在上图中，我需要填写 Y:2 和 Y:5，即男性和女性，chart1 的传入 json 数据中的数据值，即 json 数据中的第一个两个键值对。

目前这张图表 1 是固定数据。我需要从 Json 动态更新数据我还有另外两个格式相同的图表。

有关进行 AJAX 调用以将数据插入系列的任何帮助。

任何帮助加载带有 json 数据的图表将不胜感激。

谢谢：我已经修复了

 <script> 
	var cha1;  
	var cha2;
	var cha3;
function requestData() {
    $.ajax({
        url: 'jsonlive.php',
		dataType: 'json',
        success: function(data){  
			cha1.series[0].setData([{y: data.male, color: 'rgba(202,17,2,0.9)'}, {y:data.female, color: 'rgba(255,206,202,0.9)'} ]); 		
			cha2.series[0].setData([data.loc1,data.temp2,data.loc2,data.loc3,data.count1]);
			cha3.series[0].setData([{y:data.count2, color: '#ffcf48'}, {y: data.count3, color: '#fc5656'},{y:data.temp1, color: '#e35fff'}]);
            /*setTimeout(requestData, 1*1000); */   
        },
        cache: false
    })
	};
requestData();                                       // To output when the page loads
setInterval(requestData, (2*1000));
</script>

这必须是ajax代码

【问题讨论】：

您尝试过哪些 Ajax 代码？这段代码出了什么问题？
function requestData() { $.ajax({ url: 'json.php', dataType: 'json', 成功: function(point) { chart.series[0].addPoint({color : "#000", name: "Adding A Point",value: "$ 1234.00", y: 1234.00}); // 一秒后再次调用 setTimeout(requestData, 1*1000); }, cache: false } ); }

标签： jquery json ajax charts highcharts

【解决方案1】：

 <script> 
	var cha1;  
	var cha2;
	var cha3;
function requestData() {
    $.ajax({
        url: 'jsonlive.php',
		dataType: 'json',
        success: function(data){  
			cha1.series[0].setData([{y: data.male, color: 'rgba(202,17,2,0.9)'}, {y:data.female, color: 'rgba(255,206,202,0.9)'} ]); 		
			cha2.series[0].setData([data.less15,data.sixteen,data.twentysix,data.thirtysix,data.fortysixplus]);
			cha3.series[0].setData([{y:data.happy, color: '#ffcf48'}, {y: data.neutral, color: '#fc5656'},{y:data.surprise, color: '#e35fff'}]);
            /*setTimeout(requestData, 1*1000); */   
        },
        cache: false
    })
	};
requestData();                                       // To output when the page loads
setInterval(requestData, (2*1000));
</script>

以上代码用于获取json数据并发送到chart 1、chart 2和chart 3。

$(document).ready(function() {
    cha1 = new Highcharts.chart({
    chart: {
        type: 'column',
		renderTo : 'chart1',
		backgroundColor: "#636363",
        marginTop: 25,
       },
       
       .......highchart code
       
       and for data put 
       .....
       
       data[]

https://stackoverflow.com/questions/45950810/highcharts-real-time-chart-with-incoming-json-data-fixed#

【讨论】：