2-Highcharts曲线图之折线图
示例图片，在网上下载一张图片如图：其中数据自定义
引入上节模版配置 在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曲线图之折线图的更多相关文章
- HighCharts之2D折线图
HighCharts之2D折线图 1.HighCharts之2D折线图源码 line.html: <!DOCTYPE html> <html> <head> < ...
- HighCharts实现多数据折线图分列显示
HighCharts实现多数据折线图分列显示 BY ZYZ HighCharts是一个很好用的web端绘图插件,用起来很方便,它的官方支持很好.并且有中文API(不全然).画出来的图像也挺美丽的. 近 ...
- 使用highcharts动态绘制折线图——so easy
之前学习highcharts发现网上的教程大部分是对highcharts数据的注释,如何动态绘制数据大部分一笔带过,让那些初涉开发的小白云里雾里,所以我就写了一篇这样的博客. <html> ...
- 使用Highcharts生成折线图与曲线图
折线图与曲线图可以显示随时间而变化的连续数据,因此非常适用于显示在相等时间间隔下数据的趋势.本文将结合Highcharts,生成一个城市气温变化折线图和一个随时间动态即时显示CPU走势的曲线图. 如果 ...
- 4-Highcharts曲线图之时间轴折线图
鼠标按住左键 左右移动可以试试<!DOCTYPE> <html lang='en'> <head> <title>4-Highcharts曲线图之时间轴 ...
- 3-Highcharts曲线图之显示点值折线图
直接上代码 根据代码注释讲解 <!DOCTYPE> <html lang='en'> <head> <title>3-Highcharts曲线图之显示 ...
- highcharts.js的时间轴折线图
工作中正好用到. 鼠标按住左键 左右移动可以试试 <!DOCTYPE> <html lang='en'> <head> <title>4-Highcha ...
- ASP.NET MVC中使用highcharts 生成简单的折线图
直接上步骤: 生成一个options,选项包含了一些基本的配置,如标题,坐标刻度,serial等: 配置X轴显示的Category数据,为一个数组: 配置Y轴显示的数据,也为一个数据: 用 ...
- highcharts实例教程一：结合php与mysql生成折线图
Highcharts是一款纯javascript和html5编写的图表库,不仅几乎能兼容所有pc浏览器,而且对ios和android手机端的兼容 性也不错,它能够很简单便捷的在Web网站或Web应用中 ...
随机推荐
- 杭电ACM2096--小明A+B
http://acm.hdu.edu.cn/showproblem.php?pid=2096 本来就是很简单.但是数据的大小有要求. (a%100+b%100)%100和(a+b)%100本来没有什么 ...
- Model Builder中Table2Table中字段映射的问题
ArcGIS10中使用过程中,Bug不少.尽管有了SP3,但模型耦合的深层次的应用中还是错误不少.目前只是遇到一个,利用躲避的方法解决一个.例如,从NetCDF中抽出的数据表,必须在内存和数据库中都存 ...
- java和javascript中this区别的浅探讨
今天在学习javascript的时候碰到了this,感觉它跟java里的有点不一样.然后上网查了一下,参考了这篇文章,JavaScript中this关键字详解,发现它们之间的区别主要是这样: java ...
- 【风马一族_Python】 更替pip的版本
替换电脑上python中的pip的版本 例子: 下载的文件:pip-8.1.1-py2.py3-none-any.whl 下载地址:https://pypi.python.org/pypi/pip/# ...
- js中substring和substr的用法比较
推荐使用substring 方法 stringObject.substring(start,stop) stringObject.substr(start,length) 定义和用法 提取 ...
- CDH JPS 出现没有名字的进程
jps 时出现没有名字的进程 或者process information unavailable 把服务关掉,执行一下 rm -rf /tmp/hsperfdata_* 再重启就好了.
- Win2012 R2 IIS8.5+PHP(FastCGI)+MySQL运行环境搭建教程
这篇文章主要介绍了Win2012 R2 IIS8.5+PHP(FastCGI)+MySQL运行环境搭建教程,需要的朋友可以参考下 准备篇 一.环境说明: 操作系统:Windows Server 201 ...
- Linux之父Linus Torvalds：讨厌C++
"Linux内核的创始人Linus Torvalds最近在一封邮件中说明了内核开发需要使用C语言而非C++的理由.在庞大的项目中,人们对不是自己开发的模块并不了解,能快速理解其他模块中函数的 ...
- 社区发现算法问题&&NetworkX&&Gephi
在做东西的时候用到了社区发现,因此了解了一下有关社区发现的一些问题 1,社区发现算法 (1)SCAN:一种基于密度的社团发现算法 Paper: <SCAN: A Structural Clust ...
- python学习第四天第一部分
1.字典的特性:无序.去重.查询速度快.比list占用内存多. 2.字典查询速度快的原因:因为他是哈希类型的. 3.什么是(hash)哈希? hash把任意长度的二进制映射为较短的固定长度的二进制,这 ...