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 ...
随机推荐
- Cocos2d-x开发实例:使用Lambda 表达式
在Cocos2d-x 3.0之后提供了对C++11标准[1]的支持,其中的Lambda[2]表达式使用起来非常简洁.我们可以使用Lambda表达式重构上一节的实例. 我们可以将下面的代码: liste ...
- Objective-C 【内存管理&手动内存管理 综述】
------------------------------------------- 内存管理 (1)Objective-C的内存管理 栈区 存放局部变量(由于基本数据类型占用的存储空间是固定 ...
- asp.net中的Application概述
全局应用程序类 从Application这个单词上大致可以看出Application状态是整个应用程序全局的.在ASP时代我们通常会在Application中存储一些公共数据,而ASP.NET中App ...
- 开发者需要知道的11条HTML5小常识
#HTML5: The Missing Manual# 如果说HTML是一部电影,那HTML5就是一次大转折.HTML本来是不会活过21世纪的.官方Web标准组织W3C在1998年对HTML就已经撒手 ...
- sqlite3简单使用
下载SQLite3 地址:http://www.sqlite.org/download.html 下载好的文档是SQlite3.exe,假如放在D盘. cmd D: D:\>SQlite3.ex ...
- apache配置网站目录的读写权限
分享下apache中配置网站目录文件权限的方法. 假设http服务器运行用户和用户组是www,网站用户为centos,网站根目录是/home/centos/web. 操作方法与步骤:1,首先,设定网站 ...
- CentOS6.5下 yum安装LAMP
CentOS下yum安装LAMP 1. 用yum安装Apache,Mysql,PHP. 1.1安装Apache yum install httpd httpd-devel 安装完成后,用/etc/ ...
- 解决pxe网络批量安装部署linux遇到的问题和解决方法
解决“出现Unable to retrieve 192.168.0.100/var/www/html/images/install.img错误” 分析:我们必须了解这个错误出现在哪个阶段才能正确找到错 ...
- 使用JS来实现验证码功能
最近想为自己的Django博客添加验证码功能,本来想使用第三方库来实现的,不过考虑到添加第三方库对性能的影响,以及第三方库是否安全可靠的问题,还是用自己的代码来实现吧.反正用JS来实现验证码功能又不是 ...
- asp.net mvc 伪静态路由配置
asp.net mvc实现伪静态路由必须按如下方式设置好,才能访问 .htm 或者.html页面 C:\WINDOWS\Microsoft.NET\Framework\v4.0.30319\aspne ...