标签: flot
Flot和Internet Explorer 9？
我正要为我的ASP.NET应用程序选择一个图表库.
我关注flot,stackoverflow也使用了flot.当我去这里的flot示例时:http://people.iola.dk/olau/flot/examples/
它们看起来很棒.但不是在IE9中.我在IE9中看不到任何内容.如果我把我的IE9放入IE8或IE7模式,它的工作原理.如果我在SO上转到此处的用户页面
/sf/users/1585951/?tab=reputation
它也适用于IE9.我错过了什么？是否有秘密的SupportIE9 =真正的开关？
我看过protovis作为另一种选择. http://vis.stanford.edu/protovis/ex/
这在IE9中看起来很棒,但如果我把浏览器放到IE7或IE8中,它会再次令人沮丧.
提示？如何使这些工作或跨IE版本的替代品？Firefox不存在问题.适用于所有图书馆:)
推荐指数
解决办法
查看次数
用jQuery Flot绘制的外部数据
我正在尝试使用flot插件来绘制一些写入JSON文件的数据.这似乎并不难,但我找不到有用的东西......你能不能帮助我.
那是我写的页面:
$(function () {
var data;
$.getJSON("1.json", function(json) {
var data = json;
});
var options = {
legend: {
show: true,
margin: 10,
backgroundOpacity: 0.5
},
points: {
show: true,
radius: 3
},
lines: {
show: true
}
};
var plotarea = $("#placeholder");
$.plot(plotarea , data, options);
});
而1.json文件包含以下所有内容:
{ label: "Values",
data: [
[1, 50.026],
[2, 50.028],
[3, 50.029],
[4, 50.026],
[5, 50.025],
[6, 50.016]
]
}
@MarcoJohannesen即使我在JSON调用之后编写"console.log(data)",脚本仍然无法正常工作,并且屏幕上不会显示任何消息.使用Chrome实用程序(我不记得名称;-))我可以看到hte文件1.json已正确加载.我认为问题在于首先执行脚本,然后加载文件1.json.我在页面上做了一些编辑.您可以在此页面上看到演示 这是"1.htm"页面的代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML …推荐指数
解决办法
查看次数
使用平移关联两个图形时绘制内存泄漏
我们用flot渲染两个图,它们共享相同的x轴.我们绘制它们:
plot1 = $.plot($("#placeholderGraph1"), p1_data, d1_options);
plot2 = $.plot($("#placeholderGraph2"), p2_data, d2_options);
我们需要确保在一个图形上平移和缩放也会重绘另一个图形,反之亦然.我们通过以下绑定实现此目的:
$("#placeholderGraph1").bind("plotpan", adjustGraph1Axes);
$("#placeholderGraph2").bind("plotpan", adjustGraph2Axes);
如果我们不添加最后两个语句,则没有内存泄漏,浏览器(所有浏览器)在重绘时会丢失内存.但是通过上面的绑定,浏览器永远不会丢失内存,它会累积到数百兆字节.
除此之外,我们还通过鼠标移动更新单个图例.
我们尝试了以下内存泄漏的方法,但都没有用:
1.制作plot1和plot2全局变量并显式删除内容
2.删除图形divs并重新创建
3.重新绑定前显式解除绑定事件
4.在重绘之前绘制空图形
关联两个图表或转储内存的任何其他方法？
推荐指数
解决办法
查看次数
JQuery-Flot:如何为Y轴添加文本标签和为X轴添加日期标签？
基本上,我在JQuery-Flot中有一个测试图,而不是普通的整数轴.我需要为Y轴使用文本标签,为X轴使用日期标签.有谁知道怎么做？
推荐指数
解决办法
查看次数
使用Flot和Bootstrap:IE8不兼容？
我试图在Bootstrap项目中使用Flot.我发现在IE8中,Flot图是不可见的,我将问题缩小到Bootstrap使用的HTML5垫片.
这是完整的页面:它是基本的Flot示例加上HTML5垫片,图形在IE8中是不可见的(在Chrome中很好).
如果我删除HTML5填充线,IE8中的图形就可以了.但是,我需要用于Bootstrap样式的HTML5填充程序(当我添加Bootstrap时 - 为了本例的目的我已经删除了对它的引用) - 如果它不存在那么Bootstrap样式就变得棘手了.
我能做什么？
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<title>Flot Examples</title>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="/scripts/plugins/excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="/scripts/jquery-1.7.1.min.js"></script>
<script language="javascript" type="text/javascript" src="/scripts/plugins/jquery.flot.js"></script>
</head>
<body>
<div id="placeholder" style="width:100%;height:300px;"></div>
<script type="text/javascript">
$(function () {
var d1 = [];
for (var i = 0; i < 14; i += 0.5)
d1.push([i, Math.sin(i)]);
var d2 = [[0, 3], [4, 8], …推荐指数
解决办法
查看次数
JS Flot图表:2个y轴,具有相同的数据.一个有数字数据,一个有百分比
左侧y轴代表货币,右侧y轴是基于目标的百分比(绿线)
所以在这个例子中,目标是20000美元(100%),因此需要根据右边的y轴进行对齐.
我设法得到了这个jsFiddle,但正如你所看到的,显示百分比的正确y轴与实际数据没有"对齐".
格式化轴不是问题:
var percFormatter = function(val, axis) {
return (val * 100).toFixed() + '%';
}
但是如何使一个系列相对于两个轴？
推荐指数
解决办法
查看次数
绘制曲线/ Spline插件,它与FillBetween插件一起使用？
Flot FillBetween插件可以很好地与折线图一起使用.但是我需要平滑线条并使它们更加弯曲.我已经看过CurvedLined插件和Spline插件,但两者都没有与fillbetween插件一起正常工作.
有没有办法使用两条曲线/样条曲线系列并填充它们之间的区域？像下图这样的东西.当一个系列穿过另一个系列时,也可填充两个系列之间的任何封闭区域.
推荐指数
解决办法
查看次数
如何用flot只绘制点(不是线条)？
最终,我正在追寻一个非常小的一维图表,如下所示:
轴
- X轴:0到100,不可见
- Y轴:0到0(但绘制三条线可能需要-1到1)
数据
- 仅限积分.没有线条.
- 需要对两个数据集进行不同的着色(首选红色和绿色).
- x轴上的所有数据(y = 0)
- 如果形状可能,X和O将是完美的
飞机
我需要在x轴上的特定点绘制三条线,而不是标准网格.
例:
Run Code Online (Sandbox Code Playgroud)[[40,-1],[40,1]], [[50,-1],[50,1]], [[60,-1],[60,1]]
这是我到目前为止所尝试的:
d1 = [[48,0],[16,0],[10,0],[40,0],[30,0],[37,0]];
d2 = [[43,0],[60,0],[74,0],[83,0]];
var options = {
points: { show: true, fill: true, radius: 5 },
lines: { show: false, fill: true },
xaxis: { show: false, min:0, max:100, ticks: false, tickColor: 'transparent' },
yaxis: { show: false, min:-1, max:1, ticks: false, tickColor: 'transparent' },
grid: { show:false }
};
var data = [
{ data: d1, points: { …推荐指数
解决办法
查看次数
绘制时间序列,数据点太多
我在这里的Flot图表上绘制了赢率:http://jsfiddle.net/xR66k/
x轴显示周数,但我不想要这些刻度之间的点数(例如在第37周和第38周之间以及第41周和第42周之间) - 我该如何删除这些？
我正在使用以下代码创建刻度:
var data = [[1382911200000,7.6805],[1382306400000,27.4607],[1381701600000,13.0376],[1381096800000,-26.3855],[1380492000000,-11.9624],[1379887200000,-5.018],[1379282400000,-11.0009],[1378677600000,50.5376],[1378072800000,0],[1377468000000,0]];
var ticks = [];
for (var i = 0; i < data.length; i++) {
ticks.push(data[i][0]);
}
为什么Flot绘制额外的数据点？
推荐指数
解决办法
查看次数
绘图图表 - 使用flot.navigate插件同时拖动/缩放两个或多个图表
我在同一页面上显示了两个或多个flot图表,并使用flot.navigate插件进行拖动和缩放.我可以独立于其他图表缩放和拖动单个图表,但我希望其他图表与应用导航操作的图表一起移动或缩放.有些页面可能只有两个图表,其中一些页面在同一页面上有五个或六个
我的小提琴有两个图表显示,一个可以缩放(鼠标滚动)或只拖动一个图表.任何想法或帮助都非常感谢.谢谢.
http://jsfiddle.net/mashinista/cPNNJ/
<div id="placeholder1" style="width: 600px; height: 300px; padding: 0px; position: relative; cursor: auto;"></div>
$(function () {
var d1 = [];
for (var i = 0; i < Math.PI * 2; i += 0.25)
d1.push([i, Math.sin(i)]);
var data = [ d1 ];
var d2 = [];
for (var i = 0; i < Math.PI * 2; i += 0.25)
d2.push([i, Math.cos(i)]);
var data2 = [ d2 ];
var options = {
series: { lines: { show: true }, shadowSize: …推荐指数
解决办法
查看次数
标签 统计
flot ×10
jquery ×6
javascript ×5
charts ×2
plot ×2
css ×1
graph ×1
json ×1
memory-leaks ×1
navigation ×1
protovis ×1