<!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. (转)DockPanel的一点点改进

    1.当双击Tab时,原先是直接把当前Tab所表示的这个窗体,从主窗体的框架上分离现来,成为一个浮动的窗体.这不是我想要的,我把它改成了双击关闭.在DockPaneStripBase的WndProc方法 ...

  2. Windows VC++常见问题汇总

    1.warning C4996: 'setmode': The POSIX name for this item is deprecated. Instead, use the ISO C++ con ...

  3. 反编译.o到.cpp

    反编译.o到.cpp 现在有很多反编译是对Java的,而.cpp的很少 因为不同的平台.cpp生成的.o是不一样的,但是Java因为有虚拟机的中间作用,生成的.o在不同平台是一样的 反编译的机理 (通 ...

  4. KMeans聚类算法Hadoop实现

    Assistance.java  辅助类,功能详见注释 package KMeans; import org.apache.hadoop.conf.Configuration; import org. ...

  5. linux 安装mysql后修改密码出现问题

    新安装的mysql 执行命令时候出现错误: 一 错误信息: ERROR 1045 (28000): Access denied for user 'mysql'@'localhost' (using ...

  6. 终于解决了我的DISCUZ 无法连接到您的服务器,可能您的服务器处于防火墙后端 论坛云平台的问题~

    事由:由于前几天折腾备份,将论坛源文件误删了大部分,于是我重新下载了源码,传到了空间. 然后问题来了,我关闭纵横搜索提示“无法连接到您的服务器,可能您的服务器处于防火墙后端”,设置纵横搜索页一直显示“ ...

  7. 一本JavaEE的案例书

    案例很好.1.网上书店 2.AJAX网页聊天

  8. 玄机网C#论坛测试小游戏

    http://files.cnblogs.com/ro4ters/EasyGame.zip http://www.xuanjics.com/thread-39-1-1.html 具体活动地址

  9. Xcode更改配色方案

    更改配色方案:Xcode > PReferences > Fonts & Color /********************************************** ...

  10. asp.net get server control id from javascript

    var WhateverValue = document.getElementById('<%= saveValue.ClientID %>').value