Highcharts饼状图Ajax动态赋值的问题

最新推荐文章于 2021-09-23 16:10:22 发布

未曾远去

最新推荐文章于 2021-09-23 16:10:22 发布

阅读量2.6k

点赞数 3

文章标签： Highcharts 饼状图饼状图标题加粗图例

本文链接：https://blog.csdn.net/qq_36135335/article/details/80499575

版权

本文介绍了如何使用Highcharts创建动态饼状图，当鼠标悬停时部分突出显示。提供了前台JS代码示例，展示了通过JSON和Map两种方式传递数据给Ajax，并强调了数据格式化为`[[name, y], [name, y]]`数组的重要性。同时，文章还讲解了饼状图标题的加粗和颜色设置，以及如何添加颜色图例。" 112415502,10541154,串口电平标准解析：TTL、RS-232与RS-485,"['嵌入式硬件', '电路设计', '通信接口']

摘要由CSDN通过智能技术生成

这种饼状图是动态的当鼠标放上面那一部分会突出的

Highcharts下载：点击下载

Highcharts-zh_CN.js下载：点击下载

效果图：

前台js代码：

<script type="text/javascript">
		var arr = [];
		function getOrder(){
			arr = [];
			var BEGIN_TIME = $("#BEGIN_TIME").val();
			var END_TIME = $("#END_TIME").val();
			$.ajax({
				async:false,
				type:'post',
				url:'<%=basePath%>getOrder.do',
				data:{"BEGIN_TIME":BEGIN_TIME,"END_TIME":END_TIME},
				dataType:"json",
				success:function(data){
					$(data).each(function(i,item){
	                    arr.push([item.name,Number(item.y)]);
	                }); 
				}
			})
		}
		var arr2 = [];
		function getData(){
			arr2 = [];
			var BEGIN_TIME = $("#BEGIN_TIME").val();
			var END_TIME = $("#END_TIME").val();
			$.ajax({
				async:false,
				type:'post',
				url:'<%=basePath%>getData.do',
				data:{"BEGIN_TIME":BEGIN_TIME,"END_TIME":END_TIME},
				dataType:"json",
				success:function(data){
					 $(data.varList).each(function(index,item){
		                    arr2.push([item.MAT_NAME,item.TOTAL]);
		                });
				}
			})
		}
		function showCharts() {
					Highcharts.setOptions({ 
					    colors: [ '#6AF9C4','#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#058DC7','#64E572', '#FF9655', 
					'#FFF263'] 
					}); 
					var chart = Highcharts.chart('container', {
					chart: {
							plotBackgroundColor: null,
							plotBorderWidth: null,
							plotShadow: false
					},
					title: {