标签: flot

我正在尝试学习如何使用Flot,我认为你的例子是一个非常好的,简单的,非常容易理解的代码,所以我一直在尝试实现它,但这里是我在index.aspx中的代码:

$(function () {
    $.getJSON("../../Home/JsonValues", function (data) {
        alert('json: ' + data + ' ...');
        var plotarea = $("#plot_area");
        $.plot(plotarea, data);
        //$.plot(plotarea,[ [[0, 0], [1, 1]] ]);
    });
});

这是HomeController中的代码:

public ActionResult JsonValues()
{
    //string s = "[ [[0, 0], [1, 1]] ]";
    //return Json(s, JsonRequestBehavior.AllowGet);
    StringBuilder sb = new StringBuilder();
    sb.Append("[[0, 0], [1, 1]]");
    return Json("[" + sb.ToString() + "]", JsonRequestBehavior.AllowGet);
}

我得到的只是一个空图,尽管在索引中发出警报.我得到了完美的格式化JSON数据.

我究竟做错了什么？

我有一张图表,我正在使用flot绘图.当有人将鼠标悬停在文本上时,我想更改数据图的颜色.目前,我每次需要突出显示某些内容时重绘整个图表.这非常慢(简单图表大约30毫秒,更复杂的图表大约100毫秒).既然我想做的就是改变颜色,那么有更快的解决方案吗？

我正在尝试创建一个flot图,其中x轴是一个时间序列,每天有一个刻度.因此,例如,如果我在11月份显示图表,我会在11月份的每一天都打勾.

我的xaxis配置如下所示: -

 xaxis: { min: Date.UTC(2010, 0, 0, 0, 0), max: Date.UTC(2010, 1, 0, 0, 0),
                        mode: "time",  
                        minTickSize: [1, "day"] 
                    }

我想目前flot正试图自动扩展xaxis所以我实际上每隔3天就得到一个滴答.

提前致谢.

我有一个我想通过AJAX动态更新的flot图表.

我最初可以渲染图表,但每当我尝试更新dataSet并重绘图表时,它会重置我的所有数据点:

plot.setData(dataSet);
        plot.draw();

我已经尝试了几个不同的阵列设置,似乎我传递了正确的数据 - 图表只是不采取.

有人有主意吗？谢谢!

http://datasift.islsandbox.com/

此示例使用WebSockets,因此WebKit浏览器是您测试的最佳选择.

我正在探索flot,即jquery图形库.

我希望能够创建一个条形图.似乎它并没有真正为此设置.如果我稍微扭曲我的数据,我可以得到它主要做我想象的.使用此代码:

  var dataSet = [
    [ 15132, "Inez" ],
    [ 21441, "Rocky" ],
    [ 29141, "Jim" ],
    [ 18211, "Sophia" ],
    [ 17556, "Perry" ],
    [ 32251, "Jorge" ],
    [ 43560, "Madison" ],
    [ 20180, "Gil" ],
    [ 12180, "Fran" ],
    [ 31018, "Sheila" ],
    [ 45143, "Nial" ],
  ];


  function plotChart() {
    var d1, xaxisLabels = [], i=0;

    d1 = dataSet.map(function(elt){return {label: elt[1], data: [[i++, elt[0]]]};});
    i = 0;
    // example for xaxis option: {ticks: [[1,'One'], [2,'Two'], [3,'Three'], …

我正在使用flotr来绘制90个数据集.平均而言,90组数据中只有两组实际上会生成一条潦草线.另外88个左右的y值会很低,以至于它们几乎不会在x轴上方达到峰值.这是一个例子......

我的问题是我不知道这两行是什么数据集.我可以创造一个传奇,但这个传说将是巨大的,因为有大约90个数据集.所以我想知道当鼠标悬停在该数据集的图形数据上时,flotr是否具有标记这些数据集的功能.这样的功能存在吗？谢谢.

我有一个带时间戳列的postgre数据库,我在Python中有一个REST服务,它在数据库中执行查询并将数据返回到JavaScript前端以使用绘制图形flot.

现在我有问题是flot可以使用JavaScript的TIMESTAMP自动处理的日期,但我不知道如何将Postgre时间戳转换为JavaScript TIMESTAMP(YES时间戳,而不是日期停止编辑,如果你不知道答案)在Python中.我不知道这是否是最佳方法(也许转换可以在JavaScript中完成？).有没有办法做到这一点？

我正在使用Twitter Bootstrap和Flot(也是HAML和Coffeescript)构建一个Rails 3.2.11应用程序.

在一个视图中,我有像这样实现的Bootstrap选项卡(部分在选项卡窗格中呈现.),

.tabbable
  %ul.nav.nav-tabs
      %li.active
        %a{'data-toggle' => 'tab', :href => '#tab1'} This is tab 1
      %li
        %a{"data-toggle" => "tab", :href => "#tab2"} This is tab 2

    .tab-content
      #tab1.tab-pane.active
        = render 'tab_one_content'
      #tab2.tab-pane
        = render 'tab_two_content'

在一个部分,我有一张桌子.我想在td内渲染一个flot图表.我想要渲染图表的部分看起来像这样,

  %table
    %tr
      %th
        Some heading text…
      %td
        -# Make the 12-month barchart
        - @chart_data = @barchart_12_mos_array.to_json
        #my_barchart.barchart{:data => {:bardata => @chart_data}}

我将图表维度应用于这样的CSS类,

.barchart {
  width: 240px;
  height: 120px;
}

我的Coffeescript看起来像这样.我希望图表可以在document.ready上绘制

$ ->
  $.plot $('#my_barchart'), [
    data: $("#my_barchart").data("bardata")
    bars:
      show: true
      barWidth: (365/12)*24*60*60*1000*.75 …

我能够使用JQuery Flot,这是一个非常好的工具.但是,我找不到适合我的问题的好解决方案.

我想复制Y轴,所以我可以在左边显示1,在右边显示1,所以用户在比较图表最右边的数据时,不必滚动到图表的最左边.我假设他们将通过智能手机访问它.

JQuery Flot允许多个轴,但是对于每个轴,我需要一组不同的数据,如下例所示:http: //people.iola.dk/olau/flot/examples/multiple-axes.html

但我不想复制数据.我不能只是'告诉'Flot使用同一组数据复制yaxis吗？

我正在尝试flot图表,但我一直遇到这个错误:

TypeError:$ .plot不是函数

我在自己的功能之前导入了所有需要的javascripts.

HTML:

<div class="row">
    <div id="monthly_balance" class="col-md-12" style="height: 200px;">
    </div>
</div>

JS:

<script src="//cdn.jsdelivr.net/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/excanvas/r3/excanvas.compiled.js"></script>
<script src="//cdn.jsdelivr.net/jquery.flot/0.8.4/jquery.flot.min.js"></script>

<script type="text/javascript">

    $(function () {

    var data = [[1, 12], [2, 25], [3, 4]]; //examplelist

    var options = {
        series: {
            lines: { show: true },
            points: { show: true }
        }
    };

    $.plot($("#monthly_balance"), data, options)
});
</script>

我的js位于页面的底部(我也尝试将它放在头部,但保持相同的错误).