我刚刚将我的Flot版本从0.6更改为0.7,但是,当我这样做时,我的Flot图形中的图例会改变样式.以前,我曾使用"LabelClass"属性来改变样式但是在读取0.7的源代码时我发现"labelClass"不再是一个选项,我似乎被迫使用整个过程中使用的"表"CSS定义我正在努力的网站.因此,我无法更改网站的CSS"表"定义.
还有另一种改变传奇定义的好方法还是我被卡住了？
提前道歉这只是一个新手问题
亲切的问候
我想创建包含一些饼图/条形图的PDF报告.我必须使用我的PHP Web应用程序创建它们,并且不能使用命令行工具.对于前端,我使用flot.但是,我不知道如何在PDF中获取这些图表,因为我的项目仅限于PHP.
如何从我的图表生成图像以呈现PDF？
更新:解决方案必须是开源的,因为我的项目也是开源的.
最好,
斯特凡
我想知道在鼠标悬停在绘图项上时更改鼠标光标的最佳方法是什么,并在远离绘图项时将光标更改回默认值
plot.bind("plothover", function(event, pos, item) {
if(item) {
document.body.style.cursor = 'pointer';
} else {
document.body.style.cursor = 'pointer';
}
}
它在一开始就有用,但是在平底图之后不起作用......
我有一个包含2个系列的简单折线图,x轴是日期,y轴是整数.说明这一点的代码如下:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" language="javascript" src="flot/jquery.js"></script>
<script type="text/javascript" language="javascript" src="flot/jquery.flot.js"></script>
<style type="text/css">
#overview-plot24 {
width: 94%;
margin-left: 20px;
height: 220px;
}
</style>
<script type="text/javascript">
$(function() {
var plotOptions = {
//Options go here
xaxis: {
mode: "time",
tickLength: 5,
reserveSpace: true,
autoscaleMargin: 0.01
},
yaxis: {
min: 0
},
legend: {
show: false
},
series: {
lineWidth: 1,
shadowSize: 0
},
grid: {
hoverable: true,
clickable: true
}
};
var plot2 = $.plot(
'#overview-plot24', [
{
label: …我正在使用Flot 0.8.1构建一个Rails 3.2.11应用程序.我想用Prawn在PDF中渲染我的Flot图表.(我将使用.getCanvas和.toDataURL方法将图像数据Ajax到服务器.)我的Flot图表在浏览器中渲染得很好,画布上的轴标签归功于jquery.flot.canvas.js插件.
问题
我正在用宽酒吧制作条形图.我希望我的x轴标签在条形图下方居中,而不是在刻度线下面居中(它们看起来有点太远了).
在我将轴标签放在画布上之前(例如,当使用没有jquery.flot.canvas.js插件的HTML标签时),我使用SCSS为它们设置样式,
.flot-x-axis {
.tickLabel {
font-size: 10px;
padding-left: 16px; // Nudges x-axis labels to the right
}
}
现在,通过在画布上渲染标签,上面的SCSS不会将x轴标签向右移动.奇怪的是,font-size:样式确实有效,但padding-left:没有效果(也尝试了margin-left :).我似乎无法找到适当的选择器来应用填充.
我感谢任何帮助.谢谢!
更新
我在我的代码中使用了align:'center'选项,但它似乎没有任何效果(即,如同align:'center'省略).请参阅如何使用Flot canvas插件.FWIW,我正在使用基于时间的数据.
看起来我遇到了类似的问题,Flot条形图月份对齐问题
jsFiddle在这里.注意:在FireFox中呈现正常,但在Chrome中则不然.
好吧,当然它在我的jsFiddle中运行正常,但不在我的代码中.我猜我需要抬起眼睛!
我试图抓住光标所在的最近绘制点.一世
我发现源中的findNearbyItem功能jquery.flot.js似乎能够做到这一点,但是当我手动调用它时,我收到了ReferenceError: findNearbyItem is not defined错误.
这是我指的功能:
function findNearbyItem(mouseX, mouseY, seriesFilter) {
var maxDistance = options.grid.mouseActiveRadius,
smallestDistance = maxDistance * maxDistance + 1,
item = null, foundPoint = false, i, j, ps;
for (i = series.length - 1; i >= 0; --i) {
if (!seriesFilter(series[i]))
continue;
var s = series[i],
axisx = s.xaxis,
axisy = s.yaxis,
points = s.datapoints.points,
mx = axisx.c2p(mouseX), // precompute some stuff to make the loop faster
my = axisy.c2p(mouseY), …Flot使我们能够自定义网格边框.这在此处记录如下:
grid: {
borderWidth: number or object with "top", "right", "bottom" and "left" properties with different widths
borderColor: color or null or object with "top", "right", "bottom" and "left" properties with different colors
}
但是,我无法想出一个成功的工作示例.要创建一个带有白色顶部和左边框的自定义网格,我尝试了以下操作,但它不起作用:
grid: {
borderWidth: {top: 1, right: 0, bottom: 0, left: 1},
borderColor: {top: "#FFF", left: "#FFF"}
}
谁能提供一个有效的例子？
所以我有Flot运行,图形轴等绘制,但点不会被绘制.
例如,这是运行的代码(您可以在Chrome上使用JS Inspector并在http://www.flotcharts.org/flot/examples/series-types/index.html上运行代码)
JS:
$(document).ready(function() {
$.plot('#placeholder',[ [0,0],[1, 25],[5, 2],[7, 165],[8, 520],[9, 962],[10, 123] ]);
});
HTML:
<div id="placeholder" class="demo-placeholder"></div>
代码运行但没有错误 - 所以我不确定这里出了什么问题？
我在Flot网站上运行了相同的代码并导致同样的问题.
PS我正在努力为这个获得一个JSFiddle
我试图一次绘制6个时间序列,并每隔几毫秒更新一次它们的值.
以下是我最初绘制工作正常的数据的方法:
var d1 = [];
var d2 = [];
var d3 = [];
var d4 = [];
var d5 = [];
var d6 = [];
d1 = getRandomData(d1, totalPoints);
d2 = getRandomData(d2, totalPoints);
d3 = getRandomData(d3, totalPoints);
d4 = getRandomData(d4, totalPoints);
d5 = getRandomData(d5, totalPoints);
d6 = getRandomData(d6, totalPoints);
var plot = $.plot("#placeholder", [{
data: d1,
lines: { show: true, fill: false }
}, {
data: d2,
lines: { show: true, fill: false }
}, {
data: d3,
lines: …我有一个使用Flot的工作良好的堆积面积图。当前是自动生成的填充颜色。
我的问题是，是否可以消除某些颜色。意思是，我不希望图表使用绿色，红色和橙色作为填充色。