highcharts 折线图
<!doctype html>
<html lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript" src="js/exporting.js"></script>
<script>
$(function () {
$('#container').highcharts({
chart:{
type:'line'
}, xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter:function(){
return '<b>'+this.x + '</b><br/>' + this.series.name + ':' + this.y + '<br/>' + 'Total:' + this.point.stackTotal;
},
valueSuffix: '°C'
},
plotOptions: {
column: { pointPadding: 0.2, borderWidth: 0 }
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0]
}]
});
}); </script>
</head>
<body>
<div id="container" style="min-width:700px;height:400px"></div>
</body>
</html>
highcharts 折线图的更多相关文章
- jquery和highcharts折线图、柱形图、饼状图-模拟后台传參源代码
js代码: <script type="text/javascript"> $(function(){ showLine(); showColumn(); showPi ...
- highcharts折线图的简单使用
第一步:官网下载压缩包https://www.hcharts.cn/download 第二步:HTML中引入highcharts.js <!DOCTYPE html> <html&g ...
- highcharts折线图-柱形图等
https://www.highcharts.com.cn/demo/highcharts/line-basic
- Highcharts折线图_结合ajax实现局部刷新
1.首先,在https://www.hcharts.cn/下载Highcharts的组件. 2.然后,引用 <script src="../code/highcharts.js&quo ...
- Highcharts之折线图
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- ASP.NET MVC中使用highcharts 生成简单的折线图
直接上步骤: 生成一个options,选项包含了一些基本的配置,如标题,坐标刻度,serial等: 配置X轴显示的Category数据,为一个数组: 配置Y轴显示的数据,也为一个数据: 用 ...
- highcharts实例教程一：结合php与mysql生成折线图
Highcharts是一款纯javascript和html5编写的图表库,不仅几乎能兼容所有pc浏览器,而且对ios和android手机端的兼容 性也不错,它能够很简单便捷的在Web网站或Web应用中 ...
- 使用Highcharts生成折线图与曲线图
折线图与曲线图可以显示随时间而变化的连续数据,因此非常适用于显示在相等时间间隔下数据的趋势.本文将结合Highcharts,生成一个城市气温变化折线图和一个随时间动态即时显示CPU走势的曲线图. 如果 ...
- HighCharts之2D带Label的折线图
HighCharts之2D带Label的折线图 1.HighCharts之2D带Label的折线图源码 LineLabel.html: <!DOCTYPE html> <html&g ...
随机推荐
- Caching和Purgeable Memory （译）
Caching和Purgeable Memory对于开发者来说是一个至关重要的资源,尤其是当我们需要处理那些需要超大内存以及计算时间的对象或者是当计算机向磁盘写入数据时导致应用程序陷入停滞时特别有用处 ...
- Objective-C 【关于导入类（@class 和 #import的区别）】
之前我们分析过 #include 和 #import 的区别,#import不会引起交叉编译,#import 确定一个文件只能被导入一次,使在递归包含中不会出现问题. 那么 #import 和 @cl ...
- spring自定义注解
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...
- Entity Framework 之三层架构
今天,我们谈一下如何用Entity Framework构建一个三层架构.即包括DAL层,BLL层和MODEL层.我们先看一下目录结构,如下图: 目录中,我们有Web层,AVON.DMS.Model是实 ...
- linux file命令小记
在linux中,所有东西都是文件:而且他并没有后缀名这一概念.Linux的扩展名没有太大的意义, file.tar.gz file.tgz file.tar.bz2 file.rar file.gz ...
- Mac OS X安装OpenCV 3.1.0
在我的上一篇文章“”中已经介绍了Linux下OpenCV的安装配置方法,在这里仅仅记录Mac上相对于Linux的一点点差异. 1. 安装依赖包 Mac上安装软件包使用的工具是brew,用此来替代Ubu ...
- .NET架构师技能体系
.NET架构师应该掌握什么样的技术?其实这个问题很简单,去看看招聘.NET架构师的公司的职位要求就知道了.比如:http://www.cnblogs.com/guwei4037/p/5615471.h ...
- 指针之 *((volatile unsigned long *)(x))解析
今天重新温习了一下C语言的指针部分,突然想到了经常会碰见的一种宏定义:#define PGAS (*((volatile unsinged long *)(x))) 在解析该宏定义前,先看看指针变量的 ...
- 安装完MySQL后必须要调整的10项配置
2014年02月10日11:11 来源:开源中国 作者:BoydWang, 美好的2014, DrZ 编辑:徐志远 标签: 配置 , mysql , 数据库 [IT168 评论]当我们被人雇来监测My ...
- vhost设定
vhost设定 http.conf <Directory /> AllowOverride none #Require all denied </Directory> ...