标签: flot

使用jQuery Flot,我可以将null值传递给绘图机制,因此它不会在绘图上绘制任何内容.查看丢失记录的抑制方式:

我正在寻求移动d3js,以便我可以使用SVG对图形进行更深层次的低级控制.但是,我还没有找到如何做同样的抑制丢失记录的过程.下面的图像是尝试使用值0而不是null(d3包中断)的值.以下是一些代码,可以让您了解我如何生成下图:

var line = d3.svg.line()
    .x(function(d) {
       var date = new Date(d[0]);
       return x(date);
    })
    .y(function(d) {
       var height = d[1]; 
       if (no_record_exists) {
           return y(0);
       }
       return y(height) + 0.5;
    });

我path在Mozilla开发者网络上查找了SVG 元素,我发现有一个MoveTo命令,M x y它只会将"笔"移动到某个点而不会绘制任何东西.这是否已在d3js包中实现,因此path每次遇到丢失的记录时我都不必创建多个元素？

我使用flot库创建了一系列图表,这些图表都显示在一个页面上.有没有办法更新X轴最小和最大选项(options.xaxis.min,options.axis.max)值而无需重新绘制图($ .plot('占位符',数据,选项))？

我找到了这个解决方案:http://osdir.com/ml/flot-graphs/2012-02/msg00064.html 这表明以下行会这样做,但它对我不起作用 - 最小和最大可见的图不会根据此调用进行修改.

monitorGraph.getOptions().xaxis[0].max = xaxis.max;

任何有关更新图表xaxis max和min值的提示都将非常感谢!

编辑:下面的解决方案

以下代码将采用现有绘图,更新可见范围,并以非常轻松有效的方式重绘.

            plot.getOptions().xaxis[0].min = time.start;
            plot.getOptions().xaxis[0].max = time.end;
            plot.setupGrid();
            plot.draw();

我在我的应用程序中使用Flot,它工作正常.我想从图表的背景中删除垂直线和水平线.我试过这个但是我无法实现这个功能.

grid: {
    verticalLines:false,
    horizontalLines:false
}

谁可以在这方面帮助我？

我想我可能偶然发现了Flot的限制,但我不确定.我试图代表一个单一的数据系列.项目的"状态"表示在Y轴上(其中有5个),时间在X轴上(项目可以随时间改变状态).我希望图形具有连接每个数据系列的那些点的点和线.

除了跟踪项目的状态随着时间的推移,我还想在任何特定点代表它的"状态".我想通过改变点的颜色来做.这意味着单个项目在不同时间可能具有不同的状态,这意味着对于单个数据系列,我需要连接不同颜色的不同点(点)的线.

到目前为止,我唯一看到的是能够为给定数据中的所有点指定颜色.有谁知道是否有办法单独指定颜色？

谢谢.

我在Flot插件中遇到一些问题,同时在图表中显示xaxis标签.他们是'mode: "time"'.目前我使用Flot工具提示功能,工具提示包含日期和时间.我向包含时间戳的插件提供JSON.然后我转换时间戳,然后在工具提示中显示它.问题是,在图表中显示数据时,由于时区之间的差异,工具提示的时间与插件生成的xaxis标签不对应.我的JSON时间戳是+2 GMT,但Flot中的xaxis标签是+0 GMT.所以我想知道是否有可能设置时区或类似的偏移量.

我的JSON(由AJAX生成)

 [1300087800000,29],
 [1300088700000,39],
 [1300089600000,46],
 [1300090500000,53],
 [1300091400000,68],
 [1300092300000,95],
 ...

我的工具提示功能

$(placeholder).bind("plothover", function (event, pos, item) {
     $("#tooltip").remove();

     var x = item.datapoint[0].toFixed(2);
     var y = item.datapoint[1].toFixed(2);

     var currDate   = new Date(Math.floor(x));
     var hour       = currDate.getHours();
     var minute     = String("") + currDate.getMinutes();

     var tooltip = hour + ":" +
                   ((minute.length < 2) ? "0" + minute : minute) + " " +
                   (Math.round(y * 100)/100) + "Wh"
     showTooltip(item.pageX, item.pageY, tooltip);
 });  

Flot选项

 var plotOptions = { …

我有一个问题似乎无法追查.我使用Flot来绘制一些数据,超级简单.我想添加你在这里看到的悬停效果:Flot Example

不幸的是,在任何情况下都不能让'plothover'事件发生.这是代码中的简短片段:

$.plot($chartArea, eventData, eventOptions);

$chartArea.bind("plothover", function (event, pos, item) {
    console.log('hovering!');
});

您是否需要在options对象中设置以启用此行为？谢谢!

我正在研究3系列的动态flot图.我需要在点击图例时隐藏/显示系列.我已经看到了不同的例子,它们可以很好地用于静态图形,但是对于动态图形,即使它第一次工作,但是当使用新数据值更新图形时,一切都显示为默认选项.一旦我隐藏了系列,我希望它被隐藏,直到我再次点击显示它.

当我在隐藏的标签中插入图表时,如第二,第三等,我有这个错误.这里是错误:

Invalid dimensions for plot, width = 0, height = 400 in js/jquery.flot.min.js:6.

我使用了bootstrap 2和jquery:

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

这是图书馆:

<script src="js/jquery.flot.min.js"></script>
<script src="js/jquery.flot.pie.min.js"></script>
<script src="js/jquery.flot.stack.js"></script>
<script src="js/jquery.flot.resize.min.js"></script>

和css:

#plotarea
{
    max-width: none;
    height: 400px;
}
#pie 
{
    max-width: none;
    height: 400px;
}
#barmonth 
{
    max-width: none;
    height: 400px;
}
#baryear 
{
    max-width: none;
    height: 400px;
}

带有每个图表id的div(总是将id更改为我需要显示的图表,如plotarea,pie,barmonth,baryear等):

<div id="plotarea"></div>

我添加这种样式来修复宽度错误.ui-tabs .ui-tabs-hide { left: -10000px; visibility: hidden !important; },但即使这样,图表也不会在那些隐藏标签内绘制图表,只绘制第一个视图中的第一个标签...如果有一个表单,你现在可以吗？修理它？

我使用魅力模板.

最好的祝福!

我使用jquery flot作为我的饼图,当饼图片非常小时我遇到重叠标签的问题.那有一个很好的解决方案吗？

我的饼图:

series: { 
                pie: { 
                    show: true, 
                    radius: 1, 
                    label: { 
                        show: true, 
                        radius: 5/8, 
                        formatter: function(label, series){ 
                            return '<div style="font-size:12pt;text-  align:center;padding:2px;color:black;margin-left:-80%;margin-  top:-20%;">'+label+'<br/>'+Math.round(series.percent)+'%</div>'; 
                        }, 
                        background: { opacity: 0.5 } 
                    } 
                } 
            }, 
            legend: { 
                show: false 
            }

谢谢,阿尔沙夫斯基亚历山大.

尝试运行一个非常简单的flot.js示例,我有以下代码来渲染flot图表.(我故意省略所有非必要的HTML和CSS.)

<div id="chartWrapper1">
<div id="placeholder"></div>
<div id="legendholder">Legend Container</div>
</div>

<script type="text/javascript">
$(function () {
var disk1 = [[0, 3], [4, 8], [8, 5], [9, 13]];
    $.plot($("#placeholder"), [{
      legend: { show: true, container: $('#legendholder') },
      label: "Disk 1",
      data: disk1,
      lines: { show: true, fill: true }
    }]);
});
</script>

结果如下:

http://bit.ly/JTR3Bd

(StackExchange不允许我发布图片,因此上面的链接可以直接找到图表的屏幕截图.)

图表旁边的小部分,也就是传说,是另一个div(id ="legendholder"),这就是我希望传奇出现的地方.

我有网格选项的类似问题,这是我不理解的部分:

当我在JavaScript中指定选项时,似乎没有任何事情发生.图例仍然在图表中.然后,我在jquery.flot.js中对图例设置进行了硬编码,一切正常.显然,这是一个彻头彻尾的黑客攻击,但有人看到我在这里做错了吗？

是的,我已经阅读了API文档,围绕着flot.js github页面,但我无法弄清楚是什么导致了我的问题.

任何人？