Highcharts 3D柱形图jsp页面

最新推荐文章于 2021-12-21 11:50:58 发布

这小伙很高冷

最新推荐文章于 2021-12-21 11:50:58 发布

阅读量125

点赞数

本文链接：https://blog.csdn.net/weixin_44487300/article/details/103872323

版权

<%@ 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>Insert title here</title>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-3d.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<div id="sliders">
<table>
   <tr><td>Alpha 角度</td><td><input id="R0" type="range" min="0" max="45" value="15"/> <span id="R0-value" class="value"></span></td></tr>
   <tr><td>Beta 角度</td><td><input id="R1" type="range" min="0" max="45" value="15"/> <span id="R1-value" class="value"></span></td></tr>
</table>
</div>
<script language="JavaScript">
$(document).ready(function() {
   var chart = {
      renderTo: 'container',
      type: 'column',
      margin: 75,
      options3d: {
         enabled: true,         //显示图表是否设置为3D， 我们将其设置为 true
         alpha: 15,             //图表视图旋转角度
         beta: 15,              //图表视图旋转角度
         depth: 50,             //图表的合计深度，默认为100
         viewDistance: 25       //定义图表的浏览长度
      }
   };
   // 标题
   var title = {
      text: '图表旋转实例'
   };
   // 子标题
   var subtitle = {
      text: '通过拖动下面的滑块测试'
   };
 
   var plotOptions = {
      column: {
         depth: 25
      }
   };
   // 数据
   var series= [{
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
   }];
 
   var json = {};
   json.chart = chart;
   json.title = title;
   json.subtitle = subtitle;
   json.series = series;
   json.plotOptions = plotOptions;
   var highchart = new Highcharts.Chart(json);
 
   function showValues() {
      $('#R0-value').html(highchart.options.chart.options3d.alpha);
      $('#R1-value').html(highchart.options.chart.options3d.beta);
   }
 
   // 通过滑块动态调整图像
   $('#R0').on('change', function () {
      highchart.options.chart.options3d.alpha = this.value;
      showValues();
      highchart.redraw(false);
   });
   $('#R1').on('change', function () {
      highchart.options.chart.options3d.beta = this.value;
      showValues();
      highchart.redraw(false);
   });
 
   showValues();
});
</script>
</body>
</html>

这小伙很高冷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Highcharts 3D柱形图jsp页面

<%@ 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...
复制链接

扫一扫