HighCharts操作案例-折线图

来源：互联网发布：刷流量软件编辑：程序博客网时间：2024/05/21 14:47

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>

2 0