HighCharts之2D折线图

1、HighCharts之2D折线图源码

line.html：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HighCharts 2D折线图</title>
<script type="text/javascript" src="../scripts/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../scripts/js/highcharts.js"></script>
<!-- <script type="text/javascript" src="../scripts/js/modules/exporting.js"></script> -->
<script type="text/javascript">
     $(function(){
    	 $('#lineChart').highcharts({
             chart: {
                 type: 'line'
             },
             title: {
                 text: '2013年月收入'
             },
             subtitle: {
                 text: '月收入'
             },
             xAxis: {
                 categories: [
                     '一月',
                     '二月',
                     '三月',
                     '四月',
                     '五月',
                     '六月',
                     '七月',
                     '八月',
                     '九月',
                     '十月',
                     '十一月',
                     '十二月'
                 ]
             },
             yAxis: {
                 min: 0,
                 title: {
                     text: '收入 (￥)'
                 }
             },
             tooltip: {
                 headerFormat: '<span style="font-size:20px">{point.key}</span><table>',
                 pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                     '<td style="padding:0"><b>{point.y:.1f} 元</b></td></tr>',
                 footerFormat: '</table>',
                 shared: true,
                 useHTML: true
             },
             plotOptions: {
                 column: {
                     pointPadding: 0.2,
                     borderWidth: 0
                 }
             },
             series: [{
                 name: '张三',
                 data: [4995, 7169, 1064, 7292, 2440, 4545, 6545, 9564, 1245, 4512, 6523, 4514]

             }, {
                 name: '李思',
                 data: [8361, 2354, 4512, 2356, 4515, 6451, 9865, 5455, 8254, 6562, 6945, 2356]

             }, {
                 name: '王武',
                 data: [4512, 9565, 6564, 2652, 3265, 1202, 7845, 9845, 2356, 7844, 5424, 6312]

             }, {
                 name: '赵六',
                 data: [6523, 8956, 6531, 6532, 9864, 4552, 9564, 7845, 6523, 4512, 8956, 2356]

             }]
         });
     });
</script>
</head>
<body>
   <div id="lineChart" style="width: 1200px; height: 500px; margin: 0 auto"></div>
</body>
</html>

2、运行结果

HighCharts之2D折线图的更多相关文章

  1. HighCharts中的无主题的2D折线图

    HighCharts中的无主题的2D折线图 1.设计源码 <!DOCTYPE html> <html> <head> <meta charset=" ...

  2. HighCharts中的Ajax请求的2D折线图

    HighCharts中的Ajax请求的2D折线图 设计源码: <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  3. HighCharts之2D面积图

    HighCharts之2D面积图  1.HighCharts之2D面积图源码 <!DOCTYPE html> <html> <head> <meta char ...

  4. HighCharts之2D金字塔图

    HighCharts之2D金字塔图 1.实例源码 Pyramid.html: <!DOCTYPE html> <html> <head> <meta char ...

  5. HighCharts之2D半圆环图

    HighCharts之2D半圆环图 1.实例源码 HalfDonut.html: <!DOCTYPE html> <html> <head> <meta ch ...

  6. HighCharts之2D圆环图

    HighCharts之2D圆环图 1.实例源码 Donut.html: <!DOCTYPE html> <html> <head> <meta charset ...

  7. Flex中的FusionCharts 2D折线图

    Flex中的FusionCharts 2D折线图 1.设计源码 LineChart.mxml: <?xml version="1.0" encoding="utf- ...

  8. HighCharts实现多数据折线图分列显示

    HighCharts实现多数据折线图分列显示 BY ZYZ HighCharts是一个很好用的web端绘图插件,用起来很方便,它的官方支持很好.并且有中文API(不全然).画出来的图像也挺美丽的. 近 ...

  9. 使用highcharts动态绘制折线图——so easy

    之前学习highcharts发现网上的教程大部分是对highcharts数据的注释,如何动态绘制数据大部分一笔带过,让那些初涉开发的小白云里雾里,所以我就写了一篇这样的博客. <html> ...

随机推荐

  1. win32 dll工程开发创建对话框

    界面编程的CreateWindow函数需要instance,只要获取到dll工程的main的instance参数,就可以使用CreateWindow函数了. 创建对话框需要CreateDialog函数 ...

  2. 钉钉自定义机器人配合SVN钩子事件进行消息的推送实践

    目前很多公司还是使用SVN(TortoiseSVN)进行版本控制,使用简单,适合管理一般项目.协同办公软件目前钉钉比较成熟,阿里也一直在宣传推广,这两年公司也在使用,主要用于信息的沟通,其它的绩效.考 ...

  3. 本地工程引入maven工程的配置方式

    一.准备 IDE: IntelliJ IDEA 2016.3.1 maven: 3.5.2 JDK: 1.8 操作系统: Window 7 二.配置 1. maven 3.5 下载地址:http:// ...

  4. 覆盖equals()时总要覆盖hashCode()

    覆写如下: public class User{ private Integer id; private String userName; private String passWord; publi ...

  5. ASP.NET Core 2.0 : 三. 项目结构

    本章我们一起来对比着ASP.NET Framework版本看一下ASP.NET Core 2.0的项目结构.(此后的文章也尽量这样对比着, 方便学习理解.) 关注差异, 也为项目迁移做准备. 新建项目 ...

  6. c# excel print 打印 将所有列调整为一页

    excel有时候列数比较多,行数也比较多,转换成xps文档的时候,一般是通过打印来实现. 由于打印的范围限制,所以会出现本来在一行的数据,由于列数比较多,溢出范围,被打印到两页了. 为解决这个问题,需 ...

  7. phpstorm中配置真正的远程调试(xdebug)

    这里说的是真正的远程调试,不是本地,本地不需要安装任何php程序!!! 这里略去xdebug的安装,安装很简单可以下载源码包,动态编译进去! 环境: Dev 服务器(IP:192.168.2.100) ...

  8. SpringMVC源码情操陶冶-DispatcherServlet父类简析

    阅读源码有助于陶冶情操,本文对springmvc作个简单的向导 springmvc-web.xml配置 <servlet> <servlet-name>dispatch< ...

  9. 夏令营讲课内容整理 Day 3.

    本日主要内容是树与图.   1.树 树的性质 树的遍历 树的LCA 树上前缀和   树的基本性质: 对于一棵有n个节点的树,必定有n-1条边.任意两个点之间的路径是唯一确定的.   回到题目上,如果题 ...

  10. [Python Study Notes]CS架构远程访问获取信息--Client端v1.0

    更新内容: 1.添加entry栏默认ip和port口 2.修正退出功能 3.添加退出自动关闭窗口功能 4.优化cpu显示为固定保留两位小数 '''''''''''''''''''''''''''''' ...