highcharts 素颜马尾好姑娘i 2022-05-16 00:47 232阅读 0赞 一、概述 官网介绍hcharts.cn,Highcharts 系列软件包含 Highcharts JS,Highstock JS,Highmaps JS 共三款软件,均为纯 JavaScript 编写的 HTML5 图表库,全部源码开放,个人及非商业用途可以任意使用及源代码编辑。 案例 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>hcharts页面</title> <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath }/js/highcharts/highcharts.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath }/js/highcharts/modules/exporting.js"></script> <script> $(function(){ $("#test").highcharts({ chart: { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false, type: 'pie' }, title: { text: '2018年1月浏览器市场份额' }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, format: '<b>{point.name}</b>: {point.percentage:.1f} %', style: { color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' } } } }, series: [{ name: 'Brands', colorByPoint: true, data: [{ name: 'Chrome', y: 61.41, sliced: true, selected: true }, { name: 'Internet Explorer', y: 11.84 }, { name: 'Firefox', y: 10.85 }, { name: 'Edge', y: 4.67 }, { name: 'Safari', y: 4.18 }, { name: 'Sogou Explorer', y: 1.64 }, { name: 'Opera', y: 1.6 }, { name: 'QQ', y: 1.2 }, { name: 'Other', y: 2.61 }] }] }); }); </script> </head> <body> <div id="test"></div> </body> </html> 二、在项目中使用highcharts jsp页面的关键代码,在ajax请求中成功返回的方法中加载图表和数据。 function doShowHighcharts(){ $("#showSubareaWindow").window("open"); $.post("subareaAction_findSubareasGroupByProvince.action",function(data){ $("#test").highcharts({ title: { text: '区域分区分布图' }, series: [{ name: '区域分区分布图', type: 'pie', data: data }] }); }); }
还没有评论,来说两句吧...