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

Posted 2023-05-08

【中文标题】带有传入 Json 数据的 Highcharts 实时图表 [已修复 []

【英文标题】：Highcharts real time chart with incoming Json data [FIXED[]

【发布时间】：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 );

【参考方案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://***.com/questions/45950810/highcharts-real-time-chart-with-incoming-json-data-fixed#