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