<!doctype html>

<html lang="en">

    <head>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

        <script type="text/javascript" src="js/highcharts.js"></script>

        <script type="text/javascript" src="js/exporting.js"></script>

        <script>

            $(function () {

    $('#container').highcharts({

        chart:{

            type:'line'

        },

        xAxis: {

            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']

        },

        yAxis: {

            title: {

                text: 'Temperature (°C)'

            },

            plotLines: [{

                value: 0,

                width: 1,

                color: '#808080'

            }]

        },

        tooltip: {

            formatter:function(){

                return '<b>'+this.x + '</b><br/>' + this.series.name + ':' + this.y + '<br/>' + 'Total:' + this.point.stackTotal;

            },

            valueSuffix: '°C'

        },

         plotOptions: {

             column: { pointPadding: 0.2, borderWidth: 0 }

         },

        legend: {

            layout: 'vertical',

            align: 'right',

            verticalAlign: 'middle',

            borderWidth: 0

        },

        series: [{

            name: 'Tokyo',

            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5]

        }, {

            name: 'New York',

            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0]

        }, {

            name: 'Berlin',

            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0]

        }]

    });

});

        </script>

    </head>

    <body>

        <div id="container" style="min-width:700px;height:400px"></div>

    </body>

</html>

highcharts 折线图的更多相关文章

  1. jquery和highcharts折线图、柱形图、饼状图-模拟后台传參源代码

    js代码: <script type="text/javascript"> $(function(){ showLine(); showColumn(); showPi ...

  2. highcharts折线图的简单使用

    第一步:官网下载压缩包https://www.hcharts.cn/download 第二步:HTML中引入highcharts.js <!DOCTYPE html> <html&g ...

  3. highcharts折线图-柱形图等

    https://www.highcharts.com.cn/demo/highcharts/line-basic

  4. Highcharts折线图_结合ajax实现局部刷新

    1.首先,在https://www.hcharts.cn/下载Highcharts的组件. 2.然后,引用 <script src="../code/highcharts.js&quo ...

  5. Highcharts之折线图

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. ASP.NET MVC中使用highcharts 生成简单的折线图

        直接上步骤:   生成一个options,选项包含了一些基本的配置,如标题,坐标刻度,serial等: 配置X轴显示的Category数据,为一个数组: 配置Y轴显示的数据,也为一个数据: 用 ...

  7. highcharts实例教程一：结合php与mysql生成折线图

    Highcharts是一款纯javascript和html5编写的图表库,不仅几乎能兼容所有pc浏览器,而且对ios和android手机端的兼容 性也不错,它能够很简单便捷的在Web网站或Web应用中 ...

  8. 使用Highcharts生成折线图与曲线图

    折线图与曲线图可以显示随时间而变化的连续数据,因此非常适用于显示在相等时间间隔下数据的趋势.本文将结合Highcharts,生成一个城市气温变化折线图和一个随时间动态即时显示CPU走势的曲线图. 如果 ...

  9. HighCharts之2D带Label的折线图

    HighCharts之2D带Label的折线图 1.HighCharts之2D带Label的折线图源码 LineLabel.html: <!DOCTYPE html> <html&g ...

随机推荐

  1. using System.Threading;

    /// <summary> /// 执行动作:耗时而已 /// </summary> private void TestThread(string threadName) { ...

  2. OC9_文件操作

    // // main.m // OC9_文件操作 // // Created by zhangxueming on 15/6/19. // Copyright (c) 2015年 zhangxuemi ...

  3. javascript笔记——placehold

    <input type="text" name="搜索" value="搜索" placeholder="搜索" ...

  4. hibernate的运行流程

    首先了解什么是对象关系映射,ORM(Object/Relationship Mapping):对象关系映射.对象关系映射是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术.是通过使用描述对象 ...

  5. Libcurl笔记二

    一: multi与easy接口的不同处The multi interface offers several abilities that the easy interface doesn't. The ...

  6. JDK中工具类的使用

    JDK中内置了很多常用的工具类,且多以“s”结尾,如:集合工具类Collections,数组工具类Arrays,对象工具类Objects,文件工具类Files,路径工具类Paths,数学工具类Math ...

  7. Science论文"Clustering by fast search and find of density peaks"学习笔记

    "Clustering by fast search and find of density peaks"是今年6月份在<Science>期刊上发表的的一篇论文,论文中 ...

  8. jQuery学习教程(3)

    一.什么是DOM操作? 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网页上,组织页面(或文档)的对象被组织在一个树形结 ...

  9. Android开发技巧：像QQ一样输入表情图像

     EditText和TextView一样,也可以进行图文混排.所不同的是,TextView只用于显示图文混排效果,而EditText不仅可显示, 也可混合输入文字和图像,让我们先回顾一下图5.2所示的 ...

  10. laravel--belongsTo关联

    1.第一个是要引入的模型类 格式这样 belongsTo 第二个参数是拿自己这个模型表的 哪个字段 去匹配 要关联的qualified表里的哪个ID 默认是拿qualified_id去匹配,前面的是对 ...