flot.js ajax,Flot 图表图例 - Pure Example
图表图例
要让Flot显示图例, 在资料来源里要先设定label属性
//此图表可以显示图例
$.plot($("#flotcontainer"),
[
{label: "data1", data: dataset1},
{label: "data2", data: dataset2},
{label: "data3", data: dataset3}
]);
//此图表无法显示图例, 因为没有设定label属性
$.plot($("#flotcontainer"),
[
{data: dataset1},
{data: dataset2},
{data: dataset3}
]);
含有图例的折线图
范例程式码Expand
$(function () {
function GenerateSeries(added){
var data = [];
var start = 100 + added;
var end = 500 + added;
for(i=1;i<=20;i++){
var d = Math.floor(Math.random() * (end - start + 1) + start);
data.push([i, d]);
start++;
end++;
}
return data;
}
var data1 = GenerateSeries(0);
var data2 = GenerateSeries(10);
var data3 = GenerateSeries(20);
$.plot($("#example-section20 #flotcontainer"),
[
{label:"data1", data:data1},
{label:"data2", data:data2},
{label:"data3", data:data3}
],
{
grid: {
backgroundColor: { colors: ["#D1D1D1", "#7A7A7A"] }
}
}
);
});
含有图例的直条图
范例程式码Expand
$(function () {
function GenerateSeries(added){
var data = [];
var start = 100 + added;
var end = 500 + added;
for(i=1;i<=20;i++){
var d = Math.floor(Math.random() * (end - start + 1) + start);
data.push([i, d]);
start++;
end++;
}
return data;
}
var data1 = GenerateSeries(0);
var data2 = GenerateSeries(10);
var data3 = GenerateSeries(20);
var options = {
series: {
stack:true,
bars: {
show: true
}
}
};
$.plot($("#example-section21 #flotcontainer"),
[
{label:"data1", data:data1},
{label:"data2", data:data2},
{label:"data3", data:data3}
]
, options);
});
含有图例的圆饼图
范例程式码Expand
$(function () {
function GenerateSeries(added){
var data = [];
var start = 100 + added;
var end = 500 + added;
for(i=1;i<=20;i++){
var d = Math.floor(Math.random() * (end - start + 1) + start);
data.push([i, d]);
start++;
end++;
}
return data;
}
var options = {
series: {
pie: {
show: true,
tilt: 0.5
}
}
};
var data = [
{label: "data1", data:GenerateSeries(0)},
{label: "data2", data:GenerateSeries(0)},
{label: "data3", data:GenerateSeries(0)},
{label: "data4", data:GenerateSeries(0)},
{label: "data5", data:GenerateSeries(0)},
{label: "data6", data:GenerateSeries(0)}
];
$.plot($("#example-section22 #flotcontainer"), data, options);
});
flot.js ajax,Flot 图表图例 - Pure Example相关推荐
- flot.js ajax,如何画Flot实时更新图
实时更新图表可以用到的地方有很多,如CPU负载图.内存用量图或是像在线人数图等,在这我们会用CPU负载图做为范例. CPU负载实时更新图 所需要的档案 所有的档案都需加到 里, 因为我们有用到时间格式 ...
- flot.js ajax,jquery.flot.js简单绘制折线图用法示例
本文实例讲述了jquery.flot.js简单绘制折线图用法.分享给大家供大家参考,具体如下: 1.完整实例代码: 折线图 $(function() { AlPriceQuery(); }); fun ...
- jquery.flot.js简介
JQuery图表插件之Flot Flot是一个Jquery下图表插件,具有简单使用,交互效果,具有吸引力外观特点.目前支持 Internet Explorer 6+, Chrome, Firefox ...
- css+js+ajax+html实现京东项目
css+js+ajax+html实现京东项目 项目开始老样子先上效果图 : 登录页面 注册页面 首页 商品详情页面 购物车页面 接下来我们开始上代码 HTML登录页面代码块 ```html <! ...
- QML自定义图表图例
QML自定义图表图例 项目简介 项目技术 项目展示 主要源码片段解析 获取完整项目源码传送门 项目简介 创建自己的自定义图例. 创建自己的自定义图例,而不是使用ChartView API的内置图例. ...
- php js获取文件大小,js+ajax实现获取文件大小的方法_javascript技巧
本文实例讲述了js+ajax实现获取文件大小的方法.分享给大家供大家参考,具体如下: 顾名思义,通过JS和Ajax来获取上传文件的大小,在上传之前可以有个判断,对上传的文件有所控制,因为js控制文件大 ...
- 模块化 JS Ajax 请求
为什么80%的码农都做不了架构师?>>> 现在有一个需求,点击 Button需要调用一个函数获取 JSON 数据传给 artTemplate 模板渲染生成页面,所以需要在这个函 ...
- [js] ajax如何接收后台传来的图片?
[js] ajax如何接收后台传来的图片? 1.设置responseType为 Blob,2.将Blob保存为文件 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎 ...
- [js] ajax请求地址只支持http/https吗?能做到让它支持rtmp://等其它自定义协议吗 ?
[js] ajax请求地址只支持http/https吗?能做到让它支持rtmp://等其它自定义协议吗 ? ajax只支持http/https协议, 可以通过自定义http头来间接支持自定义协议 个人 ...
最新文章
- python【力扣LeetCode算法题库】999-车的可用捕获量(DFS)
- Failed to capture snapshot of output files for task ':UserAppModule:packagePreDebug' property 'outpu
- Java:使用Fork / Join框架的Mergesort
- java中servlet知识_jsp_Servlet常用知识总结
- 腾讯音乐计划以介绍形式在港交所主板二次上市
- C语言 底层IO 输入输出
- 大前端算法入门之二分查找
- Apache Spark 内存管理详解
- java检测安卓程序退出_java – 退出应用程序时的Android停止服务
- select下拉框带模糊查询_从零学会SQL:简单查询 -第二节
- python第三方库安装路径
- mescroll.js API汇总
- 【小程序开发】uniapp引入iconfont图标及使用方式
- javascript总复习
- 生命密码:你的第一本基因科普书
- 传说中开场晕过去一千多人的迈克杰克逊演唱会,有生之年请看下这个视频
- unity获取android内存大小,使用SystemInfo类获取Unity3D运行设备的各类信息(CPU类型,显卡类型等)...
- 想进入IT行业,自学还是选择培训机构。
- 电脑计算机怎么没有桌面显示器,如果您听不懂,请问为什么计算机显示器没有OLED屏幕?...
- 蚀刻后残留物和光刻胶去除技术
热门文章
- python dec2bin
- GHOST文件如何导入虚拟机
- 深圳互联网企业外迁调查:深圳房价等高压连锁效应
- 【iOS开发-45】Tom猫案例:动画、imageNamed与imageWithContentOfFile对内存影响、图片文件夹放哪儿以及文档注释
- 单卡加载多卡训练保存的模型
- 22. Unity - 3D游戏开发小计01 --- 修复动画BUG、更改环境光照、导航网格、相机跟随、场景渲染后期处理
- MapReduce核心思想及其步骤原理
- 查看电脑使用日志------电脑干了些什么,别人是否动了你的电脑
- win10 专业版 git bash 闪退问题终极解决方案
- 实现类知乎android客户端关注和取消关注的按钮点击效果