示例图片，在网上下载一张图片如图：其中数据自定义

引入上节模版配置  在script标签中写代码：具体代码如下   信息将在代码中解释。

分析：“五省收益趋势”是标题；

　　　x坐标为【2011年-2016年】、y坐标为【0-1000】，标题为gdp；

　　　右侧为图例；

<!DOCTYPE>
<html lang='en'>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script src="../jquery-2.1.4/jquery.min.js"></script>
<script src="../Highcharts-4.2.5/js/highcharts.js"></script>
<script src="../Highcharts-4.2.5/js/themes/gray.js"></script><!--主题   网格 -->

<script>
$(function () {
    $('#container').highcharts({
        //chart:{type:'spline'},
        /************标题***************/
        //标题默认显示在图表的顶部，包括标题和副标题（subTitle），其中副标题是非必须的。
        //主标图
        title: {
            //标题文字水平对齐方式有，center,left,right,默认为center
            //标题文字垂直对齐方式，有top、middle、bottom可选 默认为空【""】
            text: '五省收益趋势', //标题文字用text表示
            x:-20,
            //隐藏标题    设置标题为null即可
            //text:null

            //text:'<h1>Monthly Average Temperature</h1>',

            //useHTML:true,//是否解析html标签，设置解析后，可以使用例如a等html标签 默认是false

            //floating:true,//是否浮动，设置浮动后，标题将不占用图表区位置 默认是false

            //style:{},//文字样式，可以设置文字颜色、字体、字号，注意和css有略微的不同，例如font-size用fontSize、font-family用fontFamily表示

            //margin:80,//标题和图表区的间隔，当有副标题时，表示标题和副标题之间的间隔 默认是15

            //x: -200, //相对于水平对齐的偏移量，可以是负数，单位是px 默认是0

            //y: 20 //相对于垂直对齐的偏移量，可以使负数，单位是px 默认是0

        },
        //副标题
        //subtitle: {
        //    text: 'Source: WorldClimate.com',
        //    x: -20
        //},

        /************坐标轴***************/
        //所有的图表除了饼图都有X轴和Y轴，默认情况下，x轴显示在图表的底部，y轴显示在左侧
        //（多个y轴时可以是显示在左右两侧），通过设置chart.inverted = true 可以让x，y轴显示位置对调
        xAxis: {
            categories: ['2011年', '2012年', '2013年', '2014年', '2015年', '2016年'] //categories
        },
        yAxis: {
            title: { text: 'gdp' },//y轴标题
            plotLines: [{ value: 0, width: 1, color: '#808080' }] ,
            labels: {
                formatter:function(){
                  if(this.value <=100) {
                    return this.value;
                  }else if(this.value >100 && this.value <=200) {
                    return this.value;
                  }else {
                    return this.value;
                  }
                }
            }
        },

        /*************版权信息**********************/
        credits:{
             enabled:false // 禁用版权信息
        },

        /*************数据提示框**********************/
        //tooltip: { valueSuffix: '°C' },
        tooltip: {
            backgroundColor: '#FCFFC5',   // 背景颜色
            borderColor: 'black',         // 边框颜色
            borderRadius: 10,             // 边框圆角
            borderWidth: 3,               // 边框宽度
            shadow: true,                 // 是否显示阴影
            animation: true ,              // 是否启用动画效果
            style: {                      // 文字内容相关样式
                color: "#ff0000",
                fontSize: "12px",
                fontWeight: "blod",
                fontFamily: "Courir new"
            }
        },

        /************图例***************/
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        }, 

        /*****************数据列******************/
        series: [

            {
                name: 'A省',//图例名称
                data: [200, 230, 190, 500, 600, 689]//数据
            },
            {
                name: 'B省',
                data: [400, 700, 690, 590, 700, 780]
            },
            {
                name: 'C省',
                data: [355, 230, 489, 609, 329, 800]
            },
            {
                name: 'D省',
                data: [190, 234, 343, 444, 567, 787]
            },
            {
                name: 'E省',
                data: [122, 345, 556, 778, 568, 888]
            }

        ] 

    });
});
</script>

</head>

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

</html>

2-Highcharts曲线图之折线图的更多相关文章

  1. HighCharts之2D折线图

    HighCharts之2D折线图 1.HighCharts之2D折线图源码 line.html: <!DOCTYPE html> <html> <head> < ...

  2. HighCharts实现多数据折线图分列显示

    HighCharts实现多数据折线图分列显示 BY ZYZ HighCharts是一个很好用的web端绘图插件,用起来很方便,它的官方支持很好.并且有中文API(不全然).画出来的图像也挺美丽的. 近 ...

  3. 使用highcharts动态绘制折线图——so easy

    之前学习highcharts发现网上的教程大部分是对highcharts数据的注释,如何动态绘制数据大部分一笔带过,让那些初涉开发的小白云里雾里,所以我就写了一篇这样的博客. <html> ...

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

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

  5. 4-Highcharts曲线图之时间轴折线图

    鼠标按住左键 左右移动可以试试<!DOCTYPE> <html lang='en'> <head> <title>4-Highcharts曲线图之时间轴 ...

  6. 3-Highcharts曲线图之显示点值折线图

    直接上代码  根据代码注释讲解 <!DOCTYPE> <html lang='en'> <head> <title>3-Highcharts曲线图之显示 ...

  7. highcharts.js的时间轴折线图

    工作中正好用到. 鼠标按住左键 左右移动可以试试 <!DOCTYPE> <html lang='en'> <head> <title>4-Highcha ...

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

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

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

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

随机推荐

  1. Hadoop集群错误

    1.Hadoop集群所有的DataNode都启动不了解决办法 删除从节点.../usr/hadoop/tmp/dfs/ 下内容,再重新格式化namenode

  2. struts2中访问servlet API

    Struts2中的Action没有与任何Servlet API耦合,,但对于WEB应用的控制器而言,不访问Servlet API几乎是不可能的,例如需要跟踪HTTP Session状态等.Struts ...

  3. 将n（0<=n<=10000）的阶乘分解质因数，求其中有多少个m

    给定两个数m,n,其中m是一个素数. 将n(0<=n<=10000)的阶乘分解质因数,求其中有多少个m. 输入 第一行是一个整数s(0<s<=100),表示测试数据的组数 随后 ...

  4. EF调用函数日期查询

    q = q.Where(t => System.Data.Entity.SqlServer.SqlFunctions.DateDiff("dd", t.Date, dDate ...

  5. unity 3消 游戏

    3消游戏跟着智能手机流行到现在已经有很长一段时间,unity实现的3消 https://github.com/textcube/match3action 截图如下: 在阅读源码的时候不难发现,Game ...

  6. 基于 unity ngui 上的滚动加载__UiVirtual

    在游戏里面经常会有背包,好友,对话,这样的列表.当列表的内容多了,如果一打开界面就对所有内容进行实例化,会消耗大量的性能,且会造成UI上的卡顿. 于是便需要,在列表里面只实例化屏幕上可见的item.屏 ...

  7. 6.struts登陆页面的演示

    1.创建一个web project "Struts_1" 添加struts的jar包 --在项目文件右键->myeclipse->add struts...       ...

  8. cadence16.3破解方法

    今天安装cadence16.3,安装了两遍都失败了,百思不得其解,结果总是出现在license上,如下图所示: 后面当然就只能启动demo版了,于是网上找,参照以前古老的法子,终于解决问题! 首先,开 ...

  9. sublime text3的配置（整理）

    一.代码片段 开发人员很多时候是在做一些重复的工作. 针对不同数据表的增删改查都差不多,重复来重去的.很久不写程序了,利用十一假期在家看看书,写写程序. 最近一直很喜欢使用Sublime Text,发 ...

  10. dedecms 处理分页样式及去掉分页li

    最近装了个织梦dedecmsV5.7版本时,调用分页显示出现的结果出现好几行,怎么也不能在一排显示,找了很多资料,才了解到是由织梦模板中分页加了<Li>列表标签,解决有两种方法,下面将一一 ...