Highcharts柱状图数据展示代码_highchart var b = {type: 'column', name: k, data: -优快云博客

本文链接：https://blog.youkuaiyun.com/webnoties/article/details/17219565

本文介绍了一个简单的前端与后端数据交互案例，使用HTML、jQuery和PHP实现了一个展示城市人口数据的柱状图，并通过AJAX定时请求后端获取JSON数据更新图表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>z</title>

		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
		<script type="text/javascript">
$(function () {

		function requestData() {
				//setTimeout(requestData, 3000);
				$.getJSON('etc.php',displayData);

		}
		function displayData(dataJSON)
		{
			var series = chart.series[0];
			var data = dataJSON;
			series.setData(data);
			categories = setCate(data);
			chart.xAxis[0].setCategories(categories);
			
		}
		
		function setCate(data)
		{
			var arr = [];
			for(var i in data)
			{
				arr.push(data[i]['name']);
			}			
			return arr;
		}


       chart = new Highcharts.Chart({
            chart: {
				renderTo: 'container',
                type: 'column',
                margin: [ 50, 50, 100, 80],
				events: {
					load: requestData
				}
            },
            title: {
                text: 'World\'s largest cities per 2008'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },
			
			/*
            xAxis: {
				
                categories: [
                    'Tokyo',
                    'Jakarta',
                    'New York',
                    'Seoul',
                    'Manila',
                    'Mumbai',
                    'Sao Paulo',
                    'Mexico City',
                    'Dehli',
                    'Osaka',
                    'Cairo',
                    'Kolkata',
                    'Los Angeles',
                    'Shanghai',
                    'Moscow',
                    'Beijing',
                    'Buenos Aires',
                    'Guangzhou',
                    'Shenzhen',
                    'Istanbul',
					''
                ],
				
                labels: {
                    rotation: -45,
                    align: 'right',
                    style: {
                        fontSize: '13px',
                        fontFamily: 'Verdana, sans-serif'
                    }
                }
            },
			*/
			
			
            yAxis: {
                min: 0,
                title: {
                    text: 'Population (millions)'
                }
            },
            legend: {
                enabled: false
            },
            tooltip: {
                pointFormat: 'Population in 2008: <b>{point.y:.1f} millions</b>',
            },
            series: [{
                name: 'Population',
                data: [
				{name:'aa', y:35},
					34.4, 21.8, 20.1, 20, 19.6, 19.5, 19.1, 18.4, 18,
                    17.3, 16.8, 15, 14.7, 14.5, 13.3, 12.8, 12.4, 11.8,
                    11.7, 11.2],
                
				dataLabels: {
                    enabled: true,
                    rotation: -90,
                    color: '#FFFFFF',
                    align: 'right',
                    x: 4,
                    y: 10,
                    style: {
                        fontSize: '13px',
                        fontFamily: 'Verdana, sans-serif',
                        textShadow: '0 0 3px black'
                    }
                }
				
				
            }]
        });
    });
    

		</script>
	</head>
	<body>
<script src="js/hc.js"></script>
<script src="js/modules/exporting.js"></script>

<div id="container" style="min-width: 500px; height: 400px; margin: 0 auto"></div>

	</body>
</html>

后端php

<?php
// Set the JSON header
header("Content-type: text/json");

area();

/**
 * 地区接口
 * name名称
 * y数据值
 * 
 */
function area()
{
	$b = array(
				array('name'=>'上海', 'y'=>28.2),
				array('name'=>'北京', 'y'=>48.2),
				array('name'=>'广东', 'y'=>18.2),
		);


	$data = json_encode($b);
	echo($data);
}

?>