Question

您好我使用单个json数据的多个图表，我无法用传入的json数据填充highcharts数据系列。我按照高级手册使用了ajax，没用。我需要将前2个json数据输入到图表1，然后将3个数据输入到图表2，将最后数据输入到图表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>

Thsi 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，即男性和女性，来自图1的传入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代码

Answer 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数据并发送到图表1，图表2和图表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#

带有传入Json数据的Highcharts实时图表[FIXED []

1 个答案: