如果我将一个函数绑定到flot的"plotselected"事件,有没有办法获得所选区域的起点和终点的主系列索引？
我看到使用"plothover"你可以使用"item"变量,但不清楚它是否适用于选择.另外,我不希望每次调用函数时都要遍历整个系列.我的目标是得到类似的东西:
$("#placeholder").bind("plotselected", function (itemx1, itemx2) {
var x1 = itemx1.plot.pos //The index for this plot point in series";
var x2 = itemx2.plot.pos //The index for this plot point in series";
var sum = 0;
for (var i = x1; i < x2; i++) {
sum += d[i][0];
}
$("#total_selected").text(sum);
});
如果我能得到它,我也可以输出(我的数据)类似于:
"You earned X points over Y days, Z hours, F minutes. Good Job!"
看起来这应该很简单,但是flot真的让我失去了一个循环.
谢谢!
我得到了Flot创建的图表.我想要实现的是当用户将鼠标移动到它上面时获取某种信息 - 最好是在某种javascript弹出窗口中显示数据(来自x和y轴).
这可能是一个微不足道的问题,但我无法弄明白......
现在我的javascript看起来像这样:
<script id="source" language="javascript" type="text/javascript">
$(function () {
var data = [[1251756000000, 122.68],[1251842400000, 122.68],[1251928800000, 125.13],[1252015200000, 112.62],[1252101600000, 122.76]]
$.plot($("#graph_placeholder"), [ data ], {
xaxis: { mode: "time", minTickSize: [1, "day"], timeformat : "%y/%m/%d", },
lines: { show: true },
points: { show: false },
} );
});
</script>
所以最好是x: 1251756000000 y: 122.68在徘徊点时(x:1251756000000,y:any).或者甚至将x值格式化为timeformat(2009/11/14)中定义的值.
希望这个问题不会太混乱或长,我正在使用Flot示例,特别是这个.
我正在使用flot将我收集的一些数据绘制成Scatter图表.我正在使用以下功能...
function genScatter(){
var no = getSelectedRepeat();
$.get("getPages.json",{rid: no},function(data){
var d1 = [];
$.each(data,function(i,obj){
d1.push([obj.queries,obj.count,{url: obj.url}]);
})
$.plot($("#scatter"), [ { label: "Pages",
data: d1,
lines:{show: false},
points:{show: true}}],{
xaxis:{min: 1},
grid:{ hoverable: true}
});
});
}
我的代码生成带有各种点的散点图.当我将鼠标悬停在一个点上时,以下监听器被激活...
$("#scatter").bind("plothover", function (event, pos, item) {
$("#x").text(pos.x.toFixed(2));
$("#y").text(pos.y.toFixed(2));
if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
$("#tooltip").remove();
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
/*this would be the line where I extract
the url and forward …我知道有几个关于此的帖子,但我想我错过了一些东西.我在ajax调用中返回下面的数据,但它似乎不是FLOT的正确格式.是否有更好的格式来返回数据或应该更改FLOT以识别它？TIA
<script type="text/javascript">
$(document).ready(function() {
// Add the page method call as an onclick handler for the div.
$("#Result").click(function() {
$.ajax({
type: "POST",
url: "WebTest.aspx/GetData",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
// Replace the div's content with the page method's return.
var jsObj = []
jsObj.push($.parseJSON(msg.d));
$.plot($("#Result"), jsObj, {
grid: {
backgroundColor: "#E5E5E5",
mouseActiveRadius: 20
}
}
);
}
});
});
});
</script>
[WebMethod]
public static string GetData()
{
DataLines dataLine1 = new DataLines();
DataLines dataLine2 …图形没有绘制,控制台抛出这个:Uncaught Error: Invalid dimensions for plot, width = 1350, height = 0是错误.
我尝试在JSFiddle上重新创建错误但是无法这样做,但是它应该类似于:JSFiddle
关于此错误的一些注意事项
有时在第一个x页面加载时,将绘制图形,然后在抛出该错误后它将停止.
这是完整的错误:
Uncaught Error: Invalid dimensions for plot, width = 1350, height = 0 jquery.flot.js:119
Canvas.resize jquery.flot.js:119
Canvas jquery.flot.js:98
setupCanvases jquery.flot.js:1261
Plot jquery.flot.js:674
$.plot jquery.flot.js:3039
visc_graph active-scripts.js:45
(anonymous function) active-scripts.js:346
k jquery.min.js:2
l.fireWith jquery.min.js:2
p.extend.ready jquery.min.js:2
D jquery.min.js:2
它似乎从jquery.flot源中抛出:
Canvas.prototype.resize = function(width, height) {
if (width <= 0 || height <= 0) {
throw new Error("Invalid dimensions for plot, width = " + …我正在尝试更新一周的统计信息统计数据 这里是我的数字代码,我可以将x轴值更改为工作日吗？同样,我试图显示每月图表的日期.如何显示工作日名称而不是数字
<body>
<div id="placeholder"></div>
</body>
$(document).ready(function () {
var d1_1 = [
[1.0, 120],
[2.0, 70],
[3.0, 100],
[4.0, 60],
[5.0, 35]
];
var d1_2 = [
[1.0, 80],
[2.0, 60],
[3.0, 30],
[4.0, 35],
[5.0, 30]
];
var d1_3 = [
[1.0, 80],
[2.0, 40],
[3.0, 30],
[4.0, 20],
[5.0, 10]
];
var d1_4 = [
[1.0, 15],
[2.0, 10],
[3.0, 15],
[4.0, 20],
[5.0, 15]
];
var data1 = [
{
label: "Product 1",
data: d1_1, …我正在使用flot API来构建条形图.我成功地绘制了条形图.但我没有获得这些图表的工具提示.我已经尝试了很多,但我没有实现这一点.我的代码是:
$(function () {
var a1 = [
[0, 100],
[1, 200],
[2,300],
[3,400],
[4,500]
];
var a2 = [
[0, 90],
[1, 150],
[2,250],
[3,380],
[4,450]
];
//var ticks=[[0,"Overall"],[1,"SEA"],[2,"INDIA"],[3,"NEA"],[4,"PZ"]];
var data = [
{
label: "Pre Transformation",
data: a1
},
{
label: "Post Transformation",
data: a2
}
];
$.plot($("#placeholder2"), data, {
series: {
bars: {
show: true,
barWidth: 0.13,
order: 1
}
},
xaxis: {
ticks: [[0,"Overall"],[1,"SEA"],[2,"INDIA"],[3,"NEA"],[4,"PZ"]]
//tickLength: 0
},
grid: {
hoverable: true,
clickable:true
//mouseActiveRadius: 30 //specifies …我正在使用jQuery Flot插件,我希望有24小时的x轴.但是如何实现呢？我包括了必要的时间插件(jquery.flot.time.js)并尝试过这样的事情:
xaxis: {
mode: "time",
timeformat: "%H",
tickSize: [1, "day"],
twelveHourClock: true
}
但没有任何东西出现.我究竟做错了什么？
我正在使用jQuery Flot来创建一个简单的图形.我不需要在任何一侧显示轴,因此,点被略微切断.知道我该如何解决这个问题？
$.plot('#'+id, [
{ data: data.values, color: 'rgba(57,132,176,1)', shadowSize: 0 },
],{
series: {
lines: { show: true },
points: { show: true }
},
xaxis: {
show: false
},
yaxis: {
show: false
},
grid: {
show: false
}
});
这是我的jsFiddle
如何删除边框或与条形图相同(不是更暗)？
编辑:实际上,我需要完全删除边框.这可能吗？
var chartOptions = {
xaxis: { ticks: chartTicks },
grid: { clickable: true, hoverable: true },
series: { stack: true, bars: { fill: '#000', show: true, align:'center', barWidth: 0.5 } }
};