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++函数模板本质-学习入门
template<typename T> void mySwap(T &a, T &b) { T c; c = a; a = b; b = c; } int main() ...
- CSU-ACM2016暑假集训训练1-二分搜索 A - Can you find it?
Time Limit:3000MS Memory Limit:10000KB 64bit IO Format:%I64d & %I64u Description Give yo ...
- vs工程链接出现error LNK2005...already defined
今天使用vs2008编译工程无错误,链接过程,出现很多这样的错误: error LNK2005: "public: __thiscall std::basic_string<char, ...
- Using OpenCV Java with Eclipse
转自:http://docs.opencv.org/trunk/doc/tutorials/introduction/java_eclipse/java_eclipse.html Using Open ...
- DTCMS自定义标签：面包屑导航，栏目中通过栏目调用名称获得栏目名称
DTcms.Web.UI\Label\category.cs中增加标签 /// <summary> /// 自定义:通过类别name获得类别title /// </summary&g ...
- c# 类型初始值设定项引发异常
今天使用VS2010编译c#程序,编译顺利通过,点击运行启动程序,弹框提示如题错误.断点调试,程序甚至都没有进入main函数!!查阅网上资料,几种分析如下(1)反射机制 (2)app.config文件 ...
- 如何解决NTLDR is missing
问题:ntldr文件不见了,无法进入系统.本系统win XP 简体中文32位 解决步骤: (1)我找来一张win XP 英文版 32位的系统光盘(用U盘驱动也行) (2)重新启动计算机,并进入CMOS ...
- 排序，求几个最值问题，输入n个整数，输出其中最小的k个元素。
看完两个求最大值算法之后的一些感想. 如果想直接看算法的可以跳过.但是我觉得我这些想法还是比较有用的,至少对我将来的算法设计是这样的. 算法的功能越强大,必然意味着速度慢,因为根据丛林法则,那种慢又功 ...
- php入门单引号与双引号区别
[1]单引号和双引号在处理变量的时候做法: 括在双引号内的变量会解释出值,但是括在单引号内则不做处理,直接输出: <?php $var = 'my name is huige'; echo &q ...
- Spark Streaming揭秘 Day31 集群模式下SparkStreaming日志分析（续）
Spark Streaming揭秘 Day31 集群模式下SparkStreaming日志分析(续) 今天延续昨天的内容,主要对为什么一个处理会分解成多个Job执行进行解析. 让我们跟踪下Job调用过 ...