sillycat
- 浏览: 2488857 次
- 性别:
- 来自: 成都
-
文章分类
最新评论
-
nation：
你好，在部署Mesos+Spark的运行环境时，出现一个现象， ...
Spark(4)Deal with Mesos -
sillycat：
AMAZON Relatedhttps://www.godad ...
AMAZON API Gateway(2)Client Side SSL with NGINX -
sillycat：
sudo usermod -aG docker ec2-use ...
Docker and VirtualBox(1)Set up Shared Disk for Virtual Box -
sillycat：
Every Half an Hour30 * * * * /u ...
Build Home NAS(3)Data Redundancy -
sillycat：
3 List the Cron Job I Have>c ...
Build Home NAS(3)Data Redundancy
SuperPlan(7)TaoBao Winner - UI Highcharts JS and Bootstrap
11. HighCharts JS
11.1 Getting Started
We can download the JS file from this URL http://www.highcharts.com/download or Directly from CDN.
Found a very useful website to test the JS, http://jsfiddle.net/. We can also demo and test that on the website.
Here is the simplest demo html template
<html>
<head>
<title>HighCharts Starting</title><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><script src="http://code.highcharts.com/highcharts.js"></script></head><body><div id="container" style="width:100%; height:400px;"></div><script>var options = { chart: { type: 'bar' }, title: { text: 'Fruit Consumption' }, xAxis: { categories: ['Apples', 'Bananas', 'Oranges'] }, yAxis: { title: { text: 'Fruit eaten' } }, series: [{ name: 'Jane', data: [1, 1, 4] }, { name: 'John', data: [5, 7, 3] }] }$(function () { $('#container').highcharts(options);});</script></body>
</html>
And Learned how to set options. Just do it as JSON format.
var options = {
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 1, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
}
$(function () {
$('#container').highcharts(options);
});
All in the future, I can play on this screen http://jsfiddle.net/luohuazju/qLRGD/
I just play with it a little bit, the detail are here http://docs.highcharts.com/#home.
12. BootStrap with Version 2.3.2
12.1 HTML Template
I just use static html page to play with bootstrap, and I need to investigate the detail of all the CSS.
Here is the Header
<!DOCTYPEhtml>
<htmllang="en">
<head>
<title>Grid System</title>
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<link href="../css/lib/bootstrap/2.3.2/bootstrap.min.css"rel="stylesheet"media="screen">
<link href="../css/lib/bootstrap/2.3.2/bootstrap-responsive.min.css"rel="stylesheet"media="screen">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="../js/lib/bootstrap/2.3.2/bootstrap.min.js"></script>
</head>
…snip…
The most import part is that we need to using media="screen".
12.2 Grid System
<div class="row">
<div class="span1">Span1</div>
</div>
We can have span1 to span12. And we also have offset1 to offset12.
Sometimes, we can use nesting row and class can be changed to row-fluid
<div class="row-fluid">
<div class="span9">
span 9 column
<div class="row-fluid">
<div class="span6">Span 6</div>
<div class="span3">Span 3</div>
</div>
</div>
12.3 Layout and Responsive
<div class="container">
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span2"> Sidebar </div>
<div class="span10"> Body Content </div>
</div>
</div>
Responsive
<div class="span2">
<div class="hidden-desktop">Hidden Desktop</div>
<div class="hidden-tablet">Hidden Tablet</div>
<div class="hidden-phone">Hidden Phone</div>
</div>
<div class="span10">
<div class="visible-desktop">visible-desktop</div>
<div class="visible-tablet">visible-tablet</div>
<div class="visible-phone">visible-phone</div>
</div>
When I resize the browser, I can test the look and feel. That is amazing.
continue...
13. BackBone
come soon...
References:
http://dailyjs.com/2012/11/29/backbone-tutorial-1/
http://backbonejs.org/#introduction
http://twitter.github.io/bootstrap/scaffolding.html
high charts
http://www.highcharts.com/
11. HighCharts JS
11.1 Getting Started
We can download the JS file from this URL http://www.highcharts.com/download or Directly from CDN.
Found a very useful website to test the JS, http://jsfiddle.net/. We can also demo and test that on the website.
Here is the simplest demo html template
<html>
<head>
<title>HighCharts Starting</title><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><script src="http://code.highcharts.com/highcharts.js"></script></head><body><div id="container" style="width:100%; height:400px;"></div><script>var options = { chart: { type: 'bar' }, title: { text: 'Fruit Consumption' }, xAxis: { categories: ['Apples', 'Bananas', 'Oranges'] }, yAxis: { title: { text: 'Fruit eaten' } }, series: [{ name: 'Jane', data: [1, 1, 4] }, { name: 'John', data: [5, 7, 3] }] }$(function () { $('#container').highcharts(options);});</script></body>
</html>
And Learned how to set options. Just do it as JSON format.
var options = {
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 1, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
}
$(function () {
$('#container').highcharts(options);
});
All in the future, I can play on this screen http://jsfiddle.net/luohuazju/qLRGD/
I just play with it a little bit, the detail are here http://docs.highcharts.com/#home.
12. BootStrap with Version 2.3.2
12.1 HTML Template
I just use static html page to play with bootstrap, and I need to investigate the detail of all the CSS.
Here is the Header
<!DOCTYPEhtml>
<htmllang="en">
<head>
<title>Grid System</title>
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<link href="../css/lib/bootstrap/2.3.2/bootstrap.min.css"rel="stylesheet"media="screen">
<link href="../css/lib/bootstrap/2.3.2/bootstrap-responsive.min.css"rel="stylesheet"media="screen">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="../js/lib/bootstrap/2.3.2/bootstrap.min.js"></script>
</head>
…snip…
The most import part is that we need to using media="screen".
12.2 Grid System
<div class="row">
<div class="span1">Span1</div>
</div>
We can have span1 to span12. And we also have offset1 to offset12.
Sometimes, we can use nesting row and class can be changed to row-fluid
<div class="row-fluid">
<div class="span9">
span 9 column
<div class="row-fluid">
<div class="span6">Span 6</div>
<div class="span3">Span 3</div>
</div>
</div>
12.3 Layout and Responsive
<div class="container">
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span2"> Sidebar </div>
<div class="span10"> Body Content </div>
</div>
</div>
Responsive
<div class="span2">
<div class="hidden-desktop">Hidden Desktop</div>
<div class="hidden-tablet">Hidden Tablet</div>
<div class="hidden-phone">Hidden Phone</div>
</div>
<div class="span10">
<div class="visible-desktop">visible-desktop</div>
<div class="visible-tablet">visible-tablet</div>
<div class="visible-phone">visible-phone</div>
</div>
When I resize the browser, I can test the look and feel. That is amazing.
continue...
13. BackBone
come soon...
References:
http://dailyjs.com/2012/11/29/backbone-tutorial-1/
http://backbonejs.org/#introduction
http://twitter.github.io/bootstrap/scaffolding.html
high charts
http://www.highcharts.com/
分享到：
发表评论
-
MongoDB 2019(3)Security and Auth
2019-11-16 06:48 204MongoDB 2019(3)Security and Aut ... -
Memory Leak in NodeJS
2018-12-20 06:26 692Memory Leak in NodeJS I have d ... -
Remote Desktop Client
2018-12-07 13:19 1152Remote Desktop Client There is ... -
MetaBase UI Console(2)Docker on MySQL
2018-11-29 06:58 901MetaBase UI Console(2)Docker on ... -
AWS Lambda and Serverless Timeout
2018-09-20 01:20 599AWS Lambda and Serverless Timeo ... -
2018 WebSocket(1)Introduction
2018-03-20 01:22 10752018 WebSocket(1)Introduction ... -
2018 TypeScript Update(3)Introduction Basic Grammar
2018-03-08 03:08 5692018 TypeScript Update(3)Introd ... -
2018 TypeScript Update(2)Introduction Basic Grammar - Classes and Functions
2018-03-06 05:32 5192018 TypeScript Update(2)Introd ... -
2018 TypeScript Update(1)Introduction Basic Grammar - Types and Interface
2018-03-03 01:15 5702018 TypeScript Update(1)Introd ... -
Charts and Console(6)Paging
2018-03-01 00:12 557Charts and Console(6)Paging Th ... -
Vue.JS(3)Google Login
2018-02-14 04:53 1243Vue.JS(3)Google Login I just p ... -
Vue.JS(2)Monitor Water Console - ChartJS and Axios
2018-02-14 03:17 690Vue.JS(2)Monitor Water Console ... -
Vue.JS(1)Introduction and Basic Demo
2018-02-08 06:47 573Vue.JS(1)Introduction and Basic ... -
Charts and Console(5)Validation Form
2017-10-03 05:12 771Charts and Console(5)Validation ... -
Charts and Console(4)Display and Enhancement
2017-09-20 05:39 604Charts and Console(4)Display an ... -
Charts and Console(3)Auth and Login
2017-09-13 03:45 628Charts and Console(3)Auth and L ... -
Charts and Console(2)Login and Proxy
2017-08-31 05:39 845Charts and Console(2)Login and ... -
Charts and Console(1)UI Console and RESTful Client
2017-08-29 11:02 737Charts and Console(1)UI Console ... -
Blog Project(2)Express Backend API - istanbul - mocha - bunyan
2017-06-09 00:05 447Blog Project(2)Express Backend ... -
ReactJS(5)Composition vs Inheritance
2017-06-06 05:55 1076ReactJS(5)Composition vs Inheri ...
相关推荐
作为一种广泛存在于各个领域的竞争现象，关于赢者通吃（winner-take-all）的大部分研究太复杂以至于难以很好地理解该现象。为了用简单的方式解释winner-take-all现象，提出了一个改进的winner-take-all模型，由离散...
SOM网络即自组织特征映射网络，采用竞争学习规则——Winner-Take-All 。网络的输出神经元之间相互竞争以求被激活，结果在每一时刻只有一个输出神经元被激活。这个被激活的神经元称为竞争获胜神经元，而其它神经元的...
WINNER-II场景下的信道仿真模型，可用于分析各个场景下的信道参数
SCM WINNER II Channel Models, D1.1.2 V1.2, IST-4-027756 WINNER II Deliverable
WINNER II信道模型的建模与仿真 绍WINNER II信道模型所支持的场景，信道建模方法及信道参数和信道系数产生.
此 ALF Winner 指标通过建立在 -50/ 50 级别的翻转区域识别趋势变化。
维纳滤波器的AR参数仿真，用于分析各参数对滤波器性能影响
winner2信道模型仿真了3D信道模型，里面涉及好多应用场景。可以与现实生活中的场景相匹配
#资源达人分享计划#
ZS-Young-Data-scientist-2018-Winner-Solution-rank-3：ZS年轻数据科学家挑战赛2018
默认情况下，winner-mode 包含在 emacs 中，因为版本 20 但它没有启用。 这是一个制作支持微功能的包的实验。 我有一段时间的想法，我终于要测试了。 安装 这个包裹是果酱。 从果酱安装它 package-install winner-...
克隆或分叉此存储库： git clone https://github.com/jamigibbs/and-the-winner-is 安装依赖项： npm install 下载并安装桌面在Neo4j桌面上，使用用户neo4j和密码1234创建一个新的图形数据库。 注意：在生产
冠军得主，鸡肉晚餐！ :rooster: 输入列表并旋转方向盘，即可每次获得随机赢家。 :crystal_ball: 目录 特征 输入名称或对象列表。 编辑并删除您的列表。...机会：JavaScript的随机对象生成器 Netlify ：前端托管服务
脆皮章鱼获胜者客户 HTML 5 Phaser客户端，用于crispy-octo-winner
示例 React.js 项目 -> 按照 用法 要跟随本文，请克隆此存储库（请参阅下文以了解运行情况）并从master分支工作。 如果要查看完成的版本，请查看finished分支： git checkout finished 跑步 唯一的先决条件是安装...
组合拍卖中的获胜者确定问题项目电子商务
世界高尔夫协会工作流程
#INNOWASTEInnoWaste赢得了Technica 2021的一等奖，价值25000卢比我们的应用视频链接- 在这里签出网站- 轨迹：增强创新能力主要思想InnoWaste项目专注于家庭和公共废物的管理。 这个想法将激励人们节省固体废物，并...
Create React App入门 该项目是通过引导的。 可用脚本 在项目目录中，可以运行： yarn start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何...
语言:English 计算分数分布，以确定ESPN幻想足球中可能的胜利者。 使用最新的IBM Watson数据来为匹配中的每个播放器生成概率图表。</ p>