<!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. APC -- Asynchronous Procedure Call 异步过程调用

    异步过程调用(APC -- Asynchronous Procedure Call )是一种与常用的和简单的同步对象不同的一种同步机制. 我们在我们线程里使用基本的同步对象如MUTEX去通知其它线程, ...

  2. ASP.NET Cache的一些总结分享

    最近我们的系统面临着严峻性能瓶颈问题,这是由于访问量增加,客户端在同一时间请求增加,这迫使我们要从两个方面解决这一问题,增加硬件和提高系统的性能. 1.1.1 摘要 最近我们的系统面临着严峻性能瓶颈问 ...

  3. 基于FPGA的按键扫描程序

    最近在学习FPGA,就试着写了个按键扫描的程序.虽说有过基于单片机的按键扫描处理经验,对于按键的处理还是有一些概念.但是单片机程序的编写通常都采用C写,也有用汇编,而FPGA却是采用VHDL或者Ver ...

  4. Windows Phone 8.1 列表控件（1）：基本

    说到 List 控件,Windows Phone 8.1 上推荐使用的是 ListView 和 GridView. 而这两个控件实在太多东西可讲了,于是分成三篇来讲: (1)基本 (2)分组数据 (3 ...

  5. Windows Phone 8.1 页面导航

    1. Windows Phone 8.1 的应用框架 一个应用拥有 1 个 Window,一个 Window 包含 1 个 Frame,一个 Frame 包含 多个 Page. 获取 Frame 的方 ...

  6. 关于C#正则表达式MatchCollection类的总结，正则表达式的应用

    认识MatchCollection 类 表示通过以迭代方式将正则表达式模式应用于输入字符串所找到的成功匹配的集合. 命名空间:  System.Text.RegularExpressions 属性:C ...

  7. 玩转Slot Machine

    最近在做一个有关Slot  Machine小游戏的开发,其中遇到了不少的坑,现将个人遇到的问题总结如下,希望今后对大家开发的过程中有所的帮助. 这个项目是部署到微信朋友圈广告的,两天时间,PV就有14 ...

  8. js 操作cookie

    jquery.cookie中的操作: jquery.cookie.js是一个基于jquery的插件,点击下载! 创建一个会话cookie: $.cookie(‘cookieName’,'cookieV ...

  9. 二、mysql数据类型

    .数值型 ) decimal最大支持65位 ) 最大支持10位的二进制存储模式 bin(column),hex(column) 使用bin(二进制查看)或hex(十六进制查看)查看bit类型数据 .时 ...

  10. PHP - PDO 之 mysql 事务功能

    <?php /* pdo 学习 */ $dsn = 'mysql:host=localhost;dbname=cswl';//构建连接dsn $db = new pdo($dsn,'root', ...