highCharts 画图简单例子

最新推荐文章于 2020-06-25 07:27:33 发布

qinglang1987

最新推荐文章于 2020-06-25 07:27:33 发布

阅读量4.4k

点赞数 1

分类专栏： JavaScript 文章标签： function path html layout jsp string

本文链接：https://blog.csdn.net/wangxw8746/article/details/7197046

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

源代码：

jsp文件：highCharts.jsp

<%@ page language="java" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="<%=path%>/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="<%=path%>/js/highcharts.js"></script>

</head>
<script type="text/javascript">
   var chart;
   $(document).ready(function() {
    chart = new Highcharts.Chart({
     chart: {
      renderTo: 'container',//图表的页面显示容器
      defaultSeriesType: 'spline',//图表的显示类型（line,spline,scatter,splinearea bar,pie,area,column）
      marginRight: 125,//上下左右空隙
      marginBottom: 25 //上下左右空隙
     },
     title: {
      text: 'Monthly Average Temperature',//主标题
      x: -20 //center
     },
     subtitle: {
      text: 'Source: WorldClimate.com',//副标题
      x: -20 //center
     },
     xAxis: {   //横坐标
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
       'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
     },
     yAxis: {
      title: {
       text: '温度（°C）' //纵坐标
      },
      plotLines: [{ //标线属性
       value: 0,
       width: 1,
       color: 'red'
      }]
     },
     tooltip: { //数据点的提示框
      formatter: function() { //formatter格式化函数
                    return '<b>'+ this.series.name +'</b><br/>'+
        this.x +': '+ this.y +'°C';
      }
     },
     legend: {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'top',
      x: -10,
      y: 100,
      borderWidth: 0
     },
     series: [{ //name 曲线名称,data 曲线的数据项
      name: 'Tokyo',
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
     }, {
      name: 'New York',
      data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
     }, {
      name: 'Berlin',
      data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
     }, {
      name: 'London',
      data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
     }]
    });
   });
</script>
<body>
    <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>
</html>

添加jquery-1.4.2.min.js和highcharts.js文件

运行程序

注：修改defaultSeriesType 可以显示不同的图像类型。

qinglang1987

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
highCharts 画图简单例子

源代码：jsp文件：highCharts.jspString path = request.getContextPath();%> /js/jquery-1.4.2.min.js"> /js/highcharts.js"> var chart; $(document).ready(function()
复制链接

扫一扫

专栏目录