HighCharts操作案例-折线图

最新推荐文章于 2023-12-12 08:56:49 发布

Mr_LiuP

最新推荐文章于 2023-12-12 08:56:49 发布

阅读量4.4k

点赞数 2

分类专栏： HighCharts 文章标签： HighCharts

本文链接：https://blog.csdn.net/liupeng_family/article/details/38543347

版权

HighCharts 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HighCharts折线图

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'TestHighCharts.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

	<script src="<%=basePath%>highcharts/themes/gray.js"></script>
	<script src="<%=basePath%>highcharts/jquery-1.10.0.min.js"></script>
	<script src="<%=basePath%>highcharts/highcharts.js"></script>
	<script src="<%=basePath%>highcharts/exporting.js"></script>
	
	<script>
	$(function () { 
	    $('#container').highcharts({//图表展示容器，与div的id保持一致
	        chart: {
	            type: 'line'//指定图表的类型，默认是折线图（line）
	        },
	        credits:{
	            enabled:false // 禁用版权信息
	        },
	        title: {
	            text: '财务信息统计'//指定图表标题
	        },
	        /*
	        subtitle: {
	            text: '副标题'
	        },
	        */
	        xAxis: {
	        	title:{
	        	       text:'时间段'
	        	   },
	            categories: ['2014-08-11','2014-08-12','2014-08-13'],//指定x轴分组
	            //gridLineWidth:1,
	        },
	        yAxis: {
	        	title:{
	        	       text:'金额'
	        	   },
	        	   labels: {//格式化纵坐标的显示风格
	                   formatter: function() {
	                       return this.value ;
	                   },
 				opposite: false//反转
	               }
	        },
		legend: {//是否显示底注
           	 enabled: true
       		 },
	        series: [{//指定数据列
	            name: '应收金额', //数据列名
	            marker: {//节点以方块形式显示
	                symbol: 'square'
	            },
	            data: [100,500,300] //数据
	        }, {
	            name: '实际到账金额',
	            data: [350,200,600]
	        }],
	        tooltip: { 
	            
	            crosshairs: true,//显示竖的分割线
	            shared: true,//两个节点数据框共享
	            /*
	         	enabled: true,//每个节点显示数据框
	            formatter: function() {//格式化每个节点数据框
	                return '<b>'+ this.x +'</b><br>'+ this.series.name +': '+ this.y;
	            }
	        */
	        },
	        plotOptions: {//为每个节点显示值
	            line: {
	                dataLabels: {
	                    enabled: true
	                },
	                enableMouseTracking: true
	            },
	        },
	    });
	    
	    
	});
	
	//credits.enabled=false;
	</script>
  </head>
  
  <body>
    <div id="container" style="min-width:800px;height:400px"></div>
  </body>
</html>

Mr_LiuP

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HighCharts操作案例-折线图

<%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%> "> My JSP 'TestHighCharts.jsp
复制链接

扫一扫

专栏目录