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轴的值越来越大的时候就出现了这个显示不全 ...
随机推荐
- php去除换行(回车换行)的方法
php去除换行(回车换行)的三种方法. 代码: <?php //php 不同系统的换行 //不同系统之间换行的实现是不一样的 //linux 与unix中用 \n //MAC ...
- 转：浅谈关于b、h标签的优化技巧
<b>标签优化 <b>标签是一种加粗标记,作用就是加粗文章中的关键词,对于文章中重要的关键词加粗起到有利于用户阅读的作用.<b>标签的使用对于优化的作用是非常大的, ...
- MySQL下查看用户和建立用户
启动数据库: [root@server ~]# mysqld_safe & [1] 3289 [root@server ~]# 130913 08:19:58 mysqld_safe Logg ...
- R语言中判断是否是整数。以及读写excel
今天接手一个重复性工作, 需要手工把产品运营们在excel里写的活动规则, 插入数据库表中.为了减少出错, 提高效率. 再加上最近刚刚学R语言, 就用R练练手, 自动生成mysql的sql语句. 一次 ...
- SQL 集合（笔记）
——SQL是关于集合的 oracle是关系型数据,其中的数据表都是有一定规律的数据的一个个集合,所以在使用SQL时,如果能按照集合的思路来进行时会节省很多效率,也鞥让语句更加的清晰明了. 1.四个集合 ...
- Oracle Imp and Exp (导入和导出) 数据 工具使用
Oracle 提供两个工具imp.exe 和exp.exe分别用于导入和导出数据.这两个工具位于Oracle_home/bin目录下. 导入数据exp 1 将数据库ATSTestDB完全导出,用户名s ...
- Windows Phone Emoji
今天基于项目的需要,研究了一下windows phone 8里面的Emoji实现.如果大家用过wp版本的微信或者qq,相比一定对它里面的表情符号影像深刻吧!是的,只要你细看一下,其实在微信里面包括两种 ...
- 教你怎么安装Redis
以下命令以root用户运行:#cd /tmp/#wget http://redis.googlecode.com/files/redis-2.6.11.tar.gz#tar xzf redis-2.6 ...
- 56.ISE综合，在chipscope信号列表看不到
代码写好后,进行逻辑综合,在chipscope上添加被触发的信号时,发现有些在信号列表里看不到,这是因为这些信号没有参与到逻辑电路设计中,产生不想关的电路,综合器会默认优化资源. 还有一种情况是,对于 ...
- 4.FPGA芯片管脚解释
用户I/O:不用解释了. 配置管脚: MSEL[1:0] 用于选择配置模式,比如AS.PS等. DATA0 FPGA串行数据输入,连接到配置器件的串行数据输出管脚. DCLK FPGA串行时钟输出 ...