hcharts入门 读取 json实时数据

说明文档地址:https://api.hcharts.cn/highcharts#  https://www.hcharts.cn/docs/start-introduction
https://www.hcharts.cn/demo/highcharts/column-stacked找到想要的图表

引入对应的资源,偷懒的方法直接,官网示例中找个相似的保存到本地再编辑即可;

1、确定图表基础结构

2、读取接口获取json数据

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
		<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
		<script src="https://img.hcharts.cn/jquery/jquery-2.1.4.min.js"></script>
		<script src="https://img.hcharts.cn/highcharts/themes/sunset.js"></script>
		<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
	</head>
	<body>
		<div id="container" style="min-width:400px;height:400px"></div>
		<script>
			$(function() {
				//获取json数据并赋值
				$.getJSON("json/Child.json", function(res) {
					 console.log(res);
					 )}
        </script>
    </body>
</html>

控制台可以成功打印json说明数据读取成功;接下来编写js

注意:

以下图表的配置参数需要放在 $.getJSON( )内,否则图表可能无法正确渲染出来

json数据处理后,直接填写对应的变量,即可使用对应数据

猜你喜欢

转载自blog.csdn.net/qq_21113235/article/details/84935399
今日推荐