示例：http://www.helloweba.com/demo/highcharts/line.html
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
    <script type="text/javascript">    
        var options = {
            chart: {
                renderTo: 'container',
                type:'spline'
            },
            xAxis: {
                tickInterval: 5,
                categories:['2013-08-01 00:00:00','2013-08-01 00:00:10','2013-08-01 00:00:20','2013-08-01 00:00:30','2013-08-01 00:00:40','2013-08-01 00:00:50','2013-08-01 00:01:00','2013-08-01 00:01:10','2013-08-01 00:01:20','2013-08-01 00:01:30','2013-08-01 00:01:40','2013-08-01 00:01:50','2013-08-01 00:02:00','2013-08-01 00:02:10','2013-08-01 00:02:20','2013-08-01 00:02:30','2013-08-01 00:02:40','2013-08-01 00:02:50','2013-08-01 00:03:00','2013-08-01 00:03:10','2013-08-01 00:03:20','2013-08-01 00:03:30','2013-08-01 00:03:40','2013-08-01 00:03:50','2013-08-01 00:04:00'],
                labels:{
                    x:45,//调节x偏移
                    //y:-35,//调节y偏移
                    //rotation:25//调节倾斜角度偏移
                 }
              },
              series: [{
                data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4,29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
              }],
              legend :{
                   align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 50,
                floating: true
              }
        };
 
        $(document).ready(function(){
            var chart = new Highcharts.Chart(options);        
        });
    </script>
</head>
 
<body>
    <div id="container"></div>
</body>
</html>

构建一个highcharts的更多相关文章

  1. 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案（四）

    通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...

  2. .Net中的AOP系列之构建一个汽车租赁应用

    返回<.Net中的AOP>系列学习总目录 本篇目录 开始一个新项目 没有AOP的生活 变更的代价 使用AOP重构 本系列的源码本人已托管于Coding上:点击查看. 本系列的实验环境:VS ...

  3. .NET Core的文件系统[5]：扩展文件系统构建一个简易版“云盘”

    FileProvider构建了一个抽象文件系统,作为它的两个具体实现,PhysicalFileProvider和EmbeddedFileProvider则分别为我们构建了一个物理文件系统和程序集内嵌文 ...

  4. 基于Vue2.0+Vue-router构建一个简单的单页应用

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6185492.html 一.介绍 vue.js 是 目前 最火的前端框架,vue.js ...

  5. 《Entity Framework 6 Recipes》中文翻译系列 (20) -----第四章 ASP.NET MVC中使用实体框架之在MVC中构建一个CRUD示例

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 第四章  ASP.NET MVC中使用实体框架 ASP.NET是一个免费的Web框架 ...

  6. 从零构建一个简单的 Python Web框架

    为什么你想要自己构建一个 web 框架呢?我想,原因有以下几点: 你有一个新奇的想法,觉得将会取代其他的框架 你想要获得一些名气 你遇到的问题很独特,以至于现有的框架不太合适 你对 web 框架是如何 ...

  7. 使用Gradle构建构建一个Java Web工程及持续集成环境Jenkins配置

    安装Eclipse插件——Buildship 什么是Buildship? Buildship能方便我们通过Eclipse IDE创建和导入Gradle工程,同时还能执行Gradle任务. Eclips ...

  8. php的源代码包构建一个空的php扩展。

    下载一个php的源代码包,这里使用的是php 4.0.5版,解压后会看到php的根目录下会有README.EXT_SKEL这样一个文件,打开详细阅读了一下,发现了一个非常好用的工具,这个工具可以帮你构 ...

  9. Eclipse的maven构建一个web项目，以构建SpringMVC项目为例

    http://www.cnblogs.com/javaTest/archive/2012/04/28/2589574.html springmvc demo实例教程源代码下载:http://zuida ...

随机推荐

  1. java：redis（redis安装配置，redis的伪集群配置）

    1.redis安装配置: .安装gcc : yum install gcc-c++ .使用FTP工具FileZilla上传redis安装包到linux根目录下(当前步骤可以替换为:在root目录下执行 ...

  2. pthon基础知识（索引、切片、序列相加、乘法、检查元素是否是序列成员、计算序列长度、最大最小值）

    序列   数据存储方式  数据结构 python 列表.元组.字典.集合.字符串 序列: 一块用于存放多个值的连续内存空间,并且按一定顺序排列,可以通过索引取值 索引(编号): 索引可以是负数 从左到 ...

  3. HCL试验八

    pc1:配置静态ip地址,掩码,网关 路由器R1:配置ip地址192.168.1.254 24;配置dhcp int gi 0/0 ip add 192.168.1.254 24 qu dhcp en ...

  4. Linux C/C++基础 文件(下)

    1.fgets和fputs #include <stdio.h> int fputs(const char * str, FILE * stream); 功能:将str所指定的字符串写入到 ...

  5. 【VS开发】设备控制台 (DevCon.exe) 示例

    设备控制台 (DevCon.exe) 示例 本部分提供以下设备控制台 (DevCon.exe) 命令的示例: DevCon HwIDs 示例 1:查找所有硬件 ID 示例 2:使用模式查找硬件 ID ...

  6. 水晶报表和rdlc报表传入参数筛选

    在使用报表向客户展示结果数据时,实时的在报表中显示某些特定的数据是必需的,如:显示的部门.打印的日期等.本文只简单的演示向报表内传入一个字符值. 以下是设计好报表之后传入参数的具体操作 一.首先是水晶 ...

  7. win10 远程桌面ubuntu16

    一. 软件安装 1.1. 打开终端,安装xrdp,vncserver sudo apt-get install xrdp vnc4server xbase-clients 1.2. desktop s ...

  8. LOJ576 「LibreOJ NOI Round #2」签到游戏

    题目 先进行一个转化: 每次花费\(\gcd\limits_{i=l+1}^rB_i\)的代价,可以连\((l,r)\)这一条边. 然后我们需要求\(0\sim n\)的最小生成树. 根据Kruska ...

  9. win10 64支持承载网络

    在intel官网找到对应型号的网卡驱动. 下载win7版本的,更新驱动.安装完毕之后还要在设备管理里面更新2019 7 30这个版本的驱动. 英特尔® PROSet/无线软件和面向 IT 管理员的驱动 ...

  10. 将Abp的UnitTest中的InMemory改为SQLite in memory

    添加nuget包 Microsoft.EntityFrameworkCore.Sqlite 添加ServiceCollectionRegistrarSqlite public static class ...