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. Cookie简述

    1. Cookie是什么? Cookie(Cookies,浏览器缓存), 是指某些网站为了辨别用户身份.进行session跟踪而储存在用户本地终端上的数据(通常经过加密). 2. Cookie的作用: ...

  2. ABP官方文档翻译 6.5 内嵌资源文件

    内嵌资源文件 介绍 创建内嵌文件 xproj/project.json形式 csproj形式 添加内嵌资源管理器 使用内嵌视图 使用内嵌资源 ASP.NET Core 配置 忽略文件 重写内嵌文件 介 ...

  3. Go笔记-方法

    [方法的概念]     在 Go 语言中,结构体就像是类的一种简化形式,那么面向对象程序员可能会问:类的方法在哪里呢?在 Go 中有一个概念,它和方法有着同样的名字,并且大体上意思相同:Go 方法是作 ...

  4. BZOJ 2986: Non-Squarefree Numbers [容斥原理 二分]

    题意:求第$n \le 10^{10}$个不是无平方因子数 二分答案, 容斥一下,0个质数的平方因子-1个..... 枚举$\sqrt$的平方因子乘上莫比乌斯函数,最后求出无平方因子数的个数取补集 # ...

  5. BZOJ 2594: [Wc2006]水管局长数据加强版 [LCT kruskal]

    2594: [Wc2006]水管局长数据加强版 Time Limit: 25 Sec  Memory Limit: 128 MBSubmit: 2917  Solved: 918[Submit][St ...

  6. asp.net core 使用html文件

    在asp.net core 项目中,使用html文件一般通过使用中间件来提供服务: 打开 NuGet程序管理控制台 输入install-package Microsoft.aspnetcore.sta ...

  7. MarkDown思考

    前言 使用MarkDown有一段时间了,感觉的确很方便.大大提高了工作效率,并带来了良好的工作体验.但是,一直以来我都有一个困惑,就是MarkDown的插件和编辑器纷繁无比,却通常各自有一套自己的实现 ...

  8. C控制语句:循环

    #include<stdio.h>int main(void){long num;long sum = 0L;int status; printf("Please enter a ...

  9. CEF小白人系列1-认识CEF

    手头上有个项目需要做浏览器的相关功能,评估了几个嵌入式方案最后选定CEF作为开发基础. 在入坑新技术的时候第一选择是去官网学习,这是一个非常好的习惯. CEF官网(请科学上网) https://bit ...

  10. unix网络编程环境搭建

    unix网络编程环境搭建 网络编程 环境 1.点击下载源代码 可以通过下列官网中的源代码目录下载最新代码: http://www.unpbook.com/src.html 2.解压文件 tar -xz ...