hcharts入门读取 json实时数据

最新推荐文章于 2022-12-12 18:56:03 发布

蜗牛前端

最新推荐文章于 2022-12-12 18:56:03 发布

阅读量358

点赞数

分类专栏：工具

本文链接：https://blog.csdn.net/qq_21113235/article/details/84935399

版权

工具专栏收录该内容

3 篇文章 0 订阅

订阅专栏

说明文档地址：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数据处理后，直接填写对应的变量，即可使用对应数据

蜗牛前端

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
hcharts入门读取 json实时数据

说明文档地址：https://api.hcharts.cn/highcharts# https://www.hcharts.cn/docs/start-introduction在https://www.hcharts.cn/demo/highcharts/column-stacked找到想要的图表引入对应的资源，偷懒的方法直接，官网示例中找个相似的保存到本地再编辑即可；1、确定图表...
复制链接

扫一扫