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 ...
随机推荐
- C# 3.0 特性之扩展方法
今天,我们来聊一聊C#的扩展方法. C# 3.0中为我们提供了一个新的特性—扩展方法.什么是扩展方法呢?我们看一下MSDN的注解: 扩展方法使您能够向现有类型“添加”方法,而无需创建新的派生类型.重新 ...
- 关于 angular 小心得
心得1: //控制器里面的代码会晚一些执行 setTimeout(function(){ //获取对象的scope var ele = document.querySelector('[ng-cont ...
- Js 变量的作用域
变量的作用域 所有的变量作用域是指在哪里可用哪里不可用 局部作用域和全局作用域 在js中以函数来分割作用域 在函数里面就叫做局部作用域,在函数外面的就叫全局作用域 在函数里面如果省略var 关键字 那 ...
- php计算时间差的方法
一个简单的例子:计算借书的天数,根据每天的日期进行计算. (1) 有数据库的情况 MSSQL可以使用触发器!用专门计算日期差的函数datediff()便可. MYSQL那就用两个日期字 ...
- js替换字符串的所有示例代码
js如何替换字符串中所有. /** * 替换字符串中所有 * @param obj 原字符串 * @param str1 替换规则 * @param str2 替换成什么 * @return 替换后的 ...
- YII千万级PV架构经验分享--俯瞰篇--架构即产品
hello,大家好,我是方少,今天想问大家一个问题,如果我们自己就是产品,那么我们怎样才能说服别人,我们是最优秀的呢?高学历,不错,别人成功过了.会php,java,c#,python不行再学c++, ...
- Kakfa揭秘 Day1 Kafka原理内幕
Spark Streaming揭秘 Day32 Kafka原理内幕 今天开始,会有几天的时间,和大家研究下Kafka.在大数据处理体系中,kafka的重要性不亚于SparkStreaming.可以认为 ...
- 【BZOJ1251】序列终结者
Description 网上有许多题,就是给定一个序列,要你支持几种操作:A.B.C.D.一看另一道题,又是一个序列 要支持几种操作:D.C.B.A.尤其是我们这里的某人,出模拟试题,居然还出了一道这 ...
- OPTICS光学算法
package com.my.optics; public class DataPoint { private String name;//样本的名字 private double dimensioi ...
- iOS定位坐标转换工具-b
坐标系介绍 首先介绍一下目前的定位坐标系统1.地球坐标 :( 代号:GPS.WGS84 )--- 有W就是世界通用的也就是原始坐标体系,这是国际公认的世界标准坐标体系: 使用 WGS84 坐标系统的产 ...