3-Highcharts曲线图之显示点值折线图
直接上代码 根据代码注释讲解
<!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曲线图之显示点值折线图的更多相关文章
- HighCharts之2D带Label的折线图
HighCharts之2D带Label的折线图 1.HighCharts之2D带Label的折线图源码 LineLabel.html: <!DOCTYPE html> <html&g ...
- highcharts 动态生成x轴和折线图
highchart 动态生成x轴和折线图 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8&qu ...
- HighCharts实现多数据折线图分列显示
HighCharts实现多数据折线图分列显示 BY ZYZ HighCharts是一个很好用的web端绘图插件,用起来很方便,它的官方支持很好.并且有中文API(不全然).画出来的图像也挺美丽的. 近 ...
- echarts在数据改变后,折线图并没有全部刷新
在做一个BI项目的时候,图表需要区分国内和国外显示.当前用户所属企业具备国内外权限的时候,展示两条图表,当查看其他企业需要根据选中的企业所具备的权限改变图表.即刚开始显示两条折线图,更改选择条件并重新 ...
- seaborn分类数据可视化:散点图|箱型图|小提琴图|lv图|柱状图|折线图
一.散点图stripplot( ) 与swarmplot() 1.分类散点图stripplot( ) 用法stripplot(x=None, y=None, hue=None, data=None, ...
- 报表应用系列——图表JFreeChart: 第 4 章 折线图
双击代码全选 1 2 3 4 5 DefaultCategoryDataset dataset = new DefaultCategoryDataset(); dataset.addValue(100 ...
- Python_散点图与折线图绘制
在数据分析的过程中,经常需要将数据可视化,目前常使用的:散点图 折线图 需要import的外部包 一个是绘图 一个是字体导入 import matplotlib.pyplot as plt fro ...
- 使用Highcharts生成折线图与曲线图
折线图与曲线图可以显示随时间而变化的连续数据,因此非常适用于显示在相等时间间隔下数据的趋势.本文将结合Highcharts,生成一个城市气温变化折线图和一个随时间动态即时显示CPU走势的曲线图. 如果 ...
- Echarts 折线图y轴标签值太长时显示不全的解决办法
问题 分析 解决办法 问题 先看一下正常的情况 再看一下显示不全的情况 所有的数据都是从后台取的,也就是说动态变化的,一开始的时候数据量不大不会出现问题,后面y轴的值越来越大的时候就出现了这个显示不全 ...
随机推荐
- Apache 多端口多站点配置实例
分享下Apache多端口多站点的配置方法,配置apache服务器的朋友参考下. 配置httpd.conf 监听多个端口 复制代码代码如下: # Listen: Allows you to bind A ...
- 透过c的编程原则,来规范自己现在的一些编程习惯
1.合理的使用注释 注释为:/*…………*/ 注释有以下几种情况: 1) 版本.版权声明. 2) 函数接口说明. 3) 重要的代码或者段落显示. 注释注意: 1) 注释是对代码的解释,不是对文档.注释 ...
- Java命名:
如果没有public类,就和遵循文件名命名规则: 1.一个.java文件只能有1个public class(暗示可以没有) 2.如果有public class,那么文件名必须与修饰符为public的类 ...
- ajax向前台输出二维数组 并解析
最近在弄一个售后数据统计的功能,里边需要统计特定时期内各种客户.机型的分布比例,单单table来计算并显示很死板(一点也不酷) 于是决定用jquery插件flot并通过ajax传输数据 :flot的折 ...
- <bootstrap>bs2和3的区别</bootstrap>
实验室的list网站开始动工了,准备打算用bootstrap作布局. 大前天去本部停了长html5峰会大连站的讲演,着急往回赶,很多感兴趣的东西都没有听到,但是还是了解了一些html5的新特性 电脑端 ...
- 《Prism 5.0源码走读》 设计模式
Prism或Prism构建的应用程序时会使用大量的设计模式,本文简要列举Prism相关的那些设计模式. Adapter(适配器模式):Prism Library主要在Region和IoC contai ...
- arcgis离海距离的计算
1.利用arctoolbox——要素——面转线工具,将县界提取出来. 2.对线要素编辑,利用“分割”工具对边界截断,而后融合成一条海岸线 3.利用分析工具——领域分析——近邻分析计算点到海岸线要素的距 ...
- linq to sql (Group By/Having/Count/Sum/Min/Max/Avg操作符)
Group By/Having操作符 适用场景:分组数据,为我们查找数据缩小范围. 说明:分配并返回对传入参数进行分组操作后的可枚举对象.分组:延迟 1.简单形式: var q = from p in ...
- hdu 2091 空心三角形
题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=2091 空心三角形 Description 把一个字符三角形掏空,就能节省材料成本,减轻重量,但关键是为 ...
- linux 禁止指定账号ssh登陆
1 2 3 4 vim /etc/pam.d/sshd #在第一行添加以下代码 auth required pam_listfile.so item=user sense=de ...