直接上代码  根据代码注释讲解

<!DOCTYPE>
<html lang='en'>
<head>
<title>3-Highcharts曲线图之显示点值折线图</title>
<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;
                  }
                }
            },
            //标示线
             plotLines:[{
                color:'red',           //线的颜色，定义为红色
                dashStyle:'solid',     //默认值，这里定义为实线
                value:600,               //定义在那个值上显示标示线，这里是在x轴上刻度为3的值处垂直化一条线
                width:2                //标示线的宽度，2px
            }]
        },

        /*************版权信息**********************/
        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"
            //}
            enabled:false,    //禁用提示框
            //格式化函数 this.x表示当前点X值，this.series表示当前数据列，this.y表示当前y值
            //formatter:function(){
            //    return this.series.name + " " + this.x + " " + this.y;
            //}//自定义提示
        },

        /************图例***************/
        //省略图例会在下面显示
        //也可以设置 设置在下方
        legend: {
            layout: 'horizontal',//horizontal,vertical
            align: 'center',
            verticalAlign: 'bottom',
            borderWidth: 0
        },
        /*
        //显示在靠右居中
        legend: {
            layout: 'vertical',//horizontal,vertical
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        */

        //plotOptions用于设置图表中的数据点相关属性。
        plotOptions: {
            line: {
                //animation:true,//是否在显示图表的时候使用动画
                cursor:'pointer',//鼠标移到图表上时手势的样式
                dataLabels: {
                    enabled: true//是否在数据点上直接显示数据 设为true表示是
                },
                enableMouseTracking: false //鼠标移到图表上时是否显示提示框
            }
        },

        /*****************数据列******************/
        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>

3-Highcharts曲线图之显示点值折线图的更多相关文章

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

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

  2. highcharts 动态生成x轴和折线图

    highchart 动态生成x轴和折线图 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8&qu ...

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

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

  4. echarts在数据改变后，折线图并没有全部刷新

    在做一个BI项目的时候,图表需要区分国内和国外显示.当前用户所属企业具备国内外权限的时候,展示两条图表,当查看其他企业需要根据选中的企业所具备的权限改变图表.即刚开始显示两条折线图,更改选择条件并重新 ...

  5. seaborn分类数据可视化：散点图|箱型图|小提琴图|lv图|柱状图|折线图

    一.散点图stripplot( ) 与swarmplot() 1.分类散点图stripplot( ) 用法stripplot(x=None, y=None, hue=None, data=None, ...

  6. 报表应用系列——图表JFreeChart: 第 4 章 折线图

    双击代码全选 1 2 3 4 5 DefaultCategoryDataset dataset = new DefaultCategoryDataset(); dataset.addValue(100 ...

  7. Python_散点图与折线图绘制

    在数据分析的过程中,经常需要将数据可视化,目前常使用的:散点图  折线图 需要import的外部包  一个是绘图 一个是字体导入 import matplotlib.pyplot as plt fro ...

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

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

  9. Echarts 折线图y轴标签值太长时显示不全的解决办法

    问题 分析 解决办法 问题 先看一下正常的情况 再看一下显示不全的情况 所有的数据都是从后台取的,也就是说动态变化的,一开始的时候数据量不大不会出现问题,后面y轴的值越来越大的时候就出现了这个显示不全 ...

随机推荐

  1. Windows7防火墙服务无法启用怎么办

    点击windows 7控制面板中防火墙的“推荐配置”没有反应,打开“服务”,无法启动windows firewall,并报错.  问题:  1.点击windows 7控制面板中防火墙的“推荐配置”没有 ...

  2. 用PHP生成随机数的函数(代码示例)

    转自:http://www.jbxue.com/article/5034.html 介绍:在早期的php中生成一个随机字符串时,总是先创建一个字符池,然后用一个循环和mt_rand()或rand()生 ...

  3. Delphi For Android 开发笔记 2 NEXTGEN下的字符串类型

    delphi开发速度迅捷至少有30%(猜的,呵呵)的原因是因为其字符串(string.WideString.PChar.PAnsiChar等)处理能力. 而从delphi XE4开始,在system等 ...

  4. 【转】操作ini文件

    一.INI文件的结构: ; 注释 [小节名] 关键字=值 INI文件有多个小节,每个小节又有多个关键字, “=”后面是该关键字的值.  值的类型有三种:字符串.整型数值和布尔值. 其中字符串存贮在IN ...

  5. SQL语句的执行顺序

    一.sql语句的执行顺序 (8)SELECT (9) DISTINCT (11) <TOP_specification> <select_list> (1) FROM < ...

  6. 13.python中的字典

    字典其实和之前的元祖和列表功能相似,都是用来储存一系列对象的.也就是一种可变容器,或者是我所比喻的革新派的菜单. 但也不是完全相同,我在之前曾经将字典称为特殊的'序列',是字典拥有序列的部分特性,但是 ...

  7. 我的WPF控件库——KAN.WPF.XCtrl(141105)

    自己开发的WPF控件库,只是初版,有扩展的Button,TextBox,Window.详细参见前几篇博文. WPF自定义控件(一)——Button:http://www.cnblogs.com/Qin ...

  8. Telerik XML 数据源绑定的问题

    Telerik GridView 默认的 XElement 数据源的直接绑定,会导致内置的sort, filter ,group等功能无法使用. 原因在于Telerik GridView的那些功能是根 ...

  9. Oracle结果集 （MSSQL存储过程写报表）

    接触SQL Server比较多,写报表是用存储过程实现. 对Oracle实现像MSSQL那样,还是有很多疑问

  10. 扒一扒编辑距离（Levenshtein Distance）算法

    最近由于工作需要,接触了编辑距离(Levenshtein Distance)算法.赶脚很有意思.最初百度了一些文章,但讲的都不是很好,读起来感觉似懂非懂.最后还是用google找到了一些资料才慢慢理解 ...