标签: flot
Jquery flot双轴
我使用jquery flot显示图表....我想显示双x轴.....两个都有相同的值..我怎么能显示这个？请帮忙
关心Nisanth
推荐指数
解决办法
查看次数
jQuery Flot图的基于字符串的轴？
如何在Flot图轴上获得非数字值？
例如,我希望在Y轴上(原谅蹩脚的图表):
/*
A|
B| _/*----------*
C| _/ \
D| _/ \
E| _/ \
F| / \
G| * *
--------------------------------
100 200 300 400
我将提供的数据如下所示:var data = [[100,'G'],[200,'B'],[300,'B'],[400,'G']];
推荐指数
解决办法
查看次数
如何在Flot中的多个堆叠线图之间填充颜色？
我想在Flot中填充多个堆叠线图之间的颜色.我尝试仅为两个图表执行此操作,并且当我将第二个图形中的坐标顺序从最大(X)反转到最小(X)时起作用.关于如何为多个图表做到这一点的任何想法？
推荐指数
解决办法
查看次数
flot plotpan vs plotclick:如何在平移打开时忽略点击事件？
在我的Flot应用程序中,我启用了plotclick和plotpan事件.但是,我发现每次平移时,plotclick事件也会被触发？我想知道如何在启用平移操作时忽略点击事件？即,仅在平移时触发平移事件监听器,仅在单击时触发单击事件监听器.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>Flot Examples</title>
<link href="http://people.iola.dk/olau/flot/examples/layout.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/
javascript" src="http://people.iola.dk/olau/flot/excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="http://
people.iola.dk/olau/flot/jquery.js"></script>
<script language="javascript" type="text/javascript" src="http://
people.iola.dk/olau/flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="http://
people.iola.dk/olau/flot/jquery.flot.navigate.js"></script>
<script type="text/javascript">
$(function () {
// generate data set from a parametric function with a fractal
// look
function sumf(f, t, m) {
var res = 0;
for (var i = 1; i < m; ++i)
res += f(i * i * …推荐指数
解决办法
查看次数
jQuery flot - 缩放导致绘图缩小,轴标签消失
我已经使用jQuery flot实现了一些缩放功能,但它工作得不是很正确.通过捕获flot的"plotselected"事件并使用"ranges"参数重新绘制以修改xaxis和yaxis max和min值来实现缩放.
绘图在初始绘制时确实正确显示,我可以拖动以进行xy选择.重绘绘图时,虽然绘制了适当的数据范围,但屏幕上轴网格的实际大小会缩小.此外,每次缩放重新绘制时,轴标签都会从视图中消失,但我仍然可以在检查器中看到它们,并且在绘图的最左上方有一些看似轴标签可能已向上移动的残骸在那里,部分(几乎)可见.我有一些其他代码使用不同的数据重新绘制绘图,同时也从视图中删除轴标签,尽管绘图的大小不缩小(与缩放时一样),并且再次绘制适当的数据.我提到这两个问题或许有共同的起源.
我想也许我可以在重新绘制之前以某种方式破坏情节或清除画布来处理这些问题,但我还没有找到关于如何做到这一点的任何指导.
以下是一些相关的代码段.第一个列出最初渲染绘图并绑定到"plotselected"事件的代码:
o.midGraph = $.plot($("#small-graph-mid"), testData, graphOptions);
$("#small-graph-mid").unbind("plotselected");
$("#small-graph-mid").bind("plotselected", function (event, ranges) {
graphOptions = o.midGraph.getOptions();
testData = o.midGraph.getData();
o.midGraph = $.plot($("#small-graph-mid"), testData,
self._graphZoomOptions(graphOptions, ranges));
});
以下是将轴范围设置为新范围的函数:
_graphZoomOptions: function(options, ranges) {
return $.extend(true, {}, options, {
xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to },
yaxis: { min: ranges.yaxis.from, max: ranges.yaxis.to }
});
},
我是否正确认为我需要以某种方式破坏/清除/重置情节/画布？
推荐指数
解决办法
查看次数
如何在 Twitter Bootstrap AngularJS 模态窗口中以 100% 宽度显示 Flot 图表
我正在使用 Twitter Bootstrap AngularJS 来构建一个 Web 应用程序。在模态窗口中，我喜欢展示一个 JQuery Flot 实时图表，类似于：http ://people.iola.dk/olau/flot/examples/realtime.html
我从http://people.iola.dk/olau/flot/examples/realtime.html复制了代码 ，并将其放入我的服务器上一个名为 flot2.html 的文件中。有用。我只指定高度，它会自动将宽度设置为 100%
但是，当我将代码放入我的模板 (index.html) 文件和模式窗口中时，有两个问题。除非我指定宽度，否则它会在下面给我这个错误：
Invalid dimensions for plot, width = 0, height = 300
我设置了 width=100%，但看起来它只显示了 100px。
此外，Y 轴的标签位于网格左边缘/边界的上方，而不是它左侧的几个像素。
这是代码：
在 index.app.html 中：
<!DOCTYPE HTML>
<html ng-app="app">
...
<body ng-controller="AppCtrl">
...
<div class="container">
<div ng-view></div>
</div>
...
<script src="/js/jquery.min.js">
在模板 (index.html) 中：
...
<!-- Modal window -->
<div class="modal fade hide" id="chartModal">
...
<style>
display:block!important;
</style>
<script src="/js/jquery.flot.min.js"></script>
<script src="/js/flot/flot.demo.js"></script> <!-- I …推荐指数
解决办法
查看次数
flot饼图标签
flot饼图默认以百分比显示项目的标签,但我需要显示构成百分比而不是百分比的数字.下面的代码是我的数据和
var pieOptions={
series: {
pie: {
show: true,
radius: 1,
label: {
show: true,
radius: 3/4,
formatter: labelFormatter,
background: {
opacity: 0.5,
color: '#000'
}
}
}
},
grid: {
hoverable: true,
clickable: true
},
legend: {
container: '#pieLegend'
}
}
标签格式化程序
function labelFormatter(label, series) {
return "<div style='font-size:8pt; text-align:center; padding:2px; color:white;'>"
+ label + "<br/>" + Math.round(series.percent) + "%</div>";
}
我的数据
[["ebbok1","1"],["ebook2","4"],["ebook3","4"],["something","3"]]
所以我需要1,4,4,3来显示饼图而不是计算的百分比
编辑
我刚试过series.data[0][1],但它在图表中显示为空白
推荐指数
解决办法
查看次数
有没有办法在flot条形图中的条形图之间添加一些边距？
我有两个酒吧,一个用于入境,一个用于出境.它们看起来像这样:
有没有办法可以在它们之间增加一些余量？现在他们的价值是
var d1 = [[0, 1], [3, 7], [6, 12], [9, 17]];
var d2 = [[1, 4], [4, 9], [7, 14], [10, 19]];
正如你所看到的那样,我每个时期都会跳过一个,但我还想要一些差距:D
推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
可以使用Flot图形动画吗？
是否有可能使flot图形动画类似于"www.jqplot.com/deploy/dist/examples/barLineAnimated.html"？
如何为以下代码添加动画？
$("#verticlebar").width($('#verticlebar').parent().width());
$.plot(chartID,chartData,options);
推荐指数
解决办法
查看次数
标签 统计
flot ×10
javascript ×4
jquery ×4
graph ×2
angularjs ×1
animation ×1
charts ×1
click ×1
conflict ×1
formatting ×1
modal-dialog ×1
mouseevent ×1
pan ×1
pie-chart ×1
width ×1