标签: flot

有谁知道如何以逆时间顺序使用 Flot 时间序列，首先显示最新日期？我一直想搜索一个选项，但在 API 中找不到。这是我的代码

var plot = $.plot("#placeholder1", [data], {
        series: {
                lines: { 
                    show: true, 
                    fill: 0.1
                },
                points: { show: true, 
                    fill: 0.05 }
        },
        xaxis: 
        {    
            mode: "time",
            minTickSize: [1, "day"],
            ticks:7 
        },
        grid: {             
            backgroundColor: { colors: [ "#fff", "#fff" ] },
            borderColor: "#ccc",
            borderWidth: {
                top: 1,
                right: 1,
                bottom: 1,
                left: 1
            },
            hoverable: true,
            clickable: true,
            markings: weekendAreas
        },
        legend: {
            labelBoxBorderColor: "#fff",
            position: "ne",
            margin: [0, 0]              
        }
    });

我有一个 Flot 图表，我正在尝试制作它，以便当您单击特定的图例项目时，它会使该数据从图表中消失。

我在使其发挥作用方面取得的成功有限。我已经能够单击图例项并且删除系列线，但不能删除点，而且它似乎也是错误的线数据。

对此的任何帮助将非常感激:)

var Graphs = function () {

return {

    //main function

    initCharts: function () {
        if (!jQuery.plot) {
            return;
        }

        function showChartTooltip(x, y, xValue, yValue) {
            $('<div id="tooltip" class="chart-tooltip">' + yValue + '<\/div>').css({
                position: 'absolute',
                display: 'none',
                top: y - 40,
                left: x - 40,
                border: '0px solid #ccc',
                padding: '2px 6px',
                'background-color': '#fff'
            }).appendTo("body").fadeIn(200);
        }

        if ($('#site_revenue').size() != 0) {
            //site revenue
            var previousPoint2 = null;
            var plot_statistics = null;
            var data = [];

            togglePlot …

我有一个Flot图表,x轴显示时间 - 刻度大小等于一天.我正在显示在一天中的不同时间发生的事件的持续时间,并且我想将它们堆叠起来.Flot的时间模式根据毫秒来定位条形图,因此条形图在每个刻度/日中分开.是否有一种快速的方法使条形堆叠起来,防止它们在每天的不同x位置被绘制？

使用flot库,如何只在悬停在线上的那个位置时显示该点？我不希望所有的点一直都可见..

类似于谷歌的做法:请参阅第一个示例:http://code.google.com/apis/chart/interactive/docs/gallery/linechart.html

因为我需要结合多种图表类型,所以无法使用谷歌.我也喜欢谷歌,你不必将鼠标悬停在确切点上,足够接近并且也会触发工具提示.

可以这样做吗？还是其他任何图书馆？

编辑:这些人似乎都在使用flot,但我不确定他们是怎么做到的？https://www.portfolionumbers.com/tools/risk/report

我正在尝试制作一个每X秒更新一次的实时图表,然后随着时间的推移对其进行绘制.我遇到的问题是,当它绘制点时,点没有连接.这是我到目前为止所拥有的:

var r = [];

function fetchData() {
var options = {
    lines: { show: true },
    points: { show: true },
    xaxis: { show: false }
};
function doSomething(series)
{   
    r.push(series);
    $.plot($("#xx"), r, options);
}
$.ajax({
  url:      'playersonline.php',
  method:   'GET',
  dataType: 'json',
  success:  doSomething
});

setTimeout(fetchData, 3000);
}

fetchData();

这就是当前输出的样子. 一些照片http://screensnapr.com/e/ra6q70.png

我正在为我的图表使用jQuery Plot.我有一个列表,其中包含来自数据库的一些时间戳和值.

我想将我的时间戳转换为H:i:s格式.结果从10-05-2012 08:57:45到10-05-2012 09:03:40.

var rx = [[1336633065,  152], [1336633071,  152], [1336633076,  152], [1336633080,  153], [1336633086,  152], [1336633090,  152], [1336633095,  152], [1336633100,  152], [1336633105,  152], [1336633110,  150], [1336633115,  150], [1336633120,  152], [1336633125,  152], [1336633130,  150], [1336633135,  149], [1336633140,  153], [1336633145,  149], [1336633150,  152], [1336633155,  149], [1336633161,  149], [1336633165,  152], [1336633170,  152], [1336633175,  151], [1336633180,  150], [1336633185,  149], [1336633190,  151], [1336633195,  152], [1336633201,  152], [1336633205,  149], [1336633210,  151], [1336633215,  149], [1336633220,  151], [1336633225,  152], [1336633230,  149], [1336633235,  151], [1336633240,  152], …

我试图使用foot-rails gem 安装flot但是没有成功.

我添加gem "flot-rails"到我的gemfile并执行bundle install

然后我补充道

//= require jquery.flot
//= require jquery.flot.resize

到我的/app/assets/javascripts/application.js文件

我验证了gem正确安装(gem show flot-rails)并发现javascripts都在gem的供应商目录中,但是我的app报告

找不到文件'jquery.flot'(在... path/app/assets/javascripts/application.js:12)

我选择手动将文件安装到我的资产目录中,但我想知道我的链轮有什么问题.

为什么sprockets解析引用？

是否可以用flot制作面积图？我注意到有一个"堆栈"插件.下图是我想要创建的效果.只有一个问题,堆栈插件会自动添加组件数据.我不希望这样.我只想填写效果.

我尝试了属性之间的填充,但这会产生令人讨厌的颜色混合(见下文):

在堆栈示例中,颜色根本不会混合.这就是我想要的视觉效果.

更新 我用来使其工作的代码是:

  var dataSet = [
        {id: "A", label: "Demand (kW)", color: "#2980B9", data: d, lines: { show: true, lineWidth: 1, fill: .5}},
        {id: "B", label: "Demand (kW)", color: "#D35400", data: d2, lines: { show: true, lineWidth: 1, fill: .5 }, fillBetween: "A"},
        {id: "C", label: "Demand (kW)", color: "#C0392B", data: d3, lines: { show: true, lineWidth: 1, fill: .5 }, fillBetween: "B"}
    ]

我想绘制2个数据系列.

第一个是具有时间和高度(水位)的动态系列事件.

第二个是从t = 0到indef的最大高度.

我希望第一个数据系列有点,第二个没有点(因为它只是一个警告线).

到目前为止我尝试了以下内容:

pl_data[0].data = plot_data;
pl_data[1].data = plot_maxHeightCoords;
var pl_options = {   series: {
                    lines: { show: true },
                    points: { show:[true,false] }
                    }
};
$.plot("#placeholder_flot", pl_data, pl_options);

还有这个:

pl_options.points:[true,false];

然而,这不会工作.它适用于颜色,所以我认为它也应该用于点.

我阅读了文档但无法找到解决此问题的提示.

感谢您的任何帮助!

我正在使用flot库,并且在正确显示x轴标签时遇到一些问题.

如果我有一个测试数据数组,像这样:

  var textData = ["51% <br> 101 <br> data1", "11% <br> 32 <br> data2", "26% <br> 64 <br> data3"];

然后使用它以这种方式创建x轴标签:

 xaxis: {
            tickLength: 0,
            show: true,
            ticks: [[0, textData[0]], [1, textData[1]], [2, textData[2]]]
        },

工作正常:

这适用于测试一,但是,数据项的数量可能会有所不同,所以我应该动态创建x轴值.我试过这个:

     xaxis: {
                tickLength: 0,
                show: true,
            }
     })

     for (var i = 0; i < textData.length; i++) {
        ticks.push(i, textData[i]);
    }

这将创建图表,但x轴标签将显示不正确:

任何帮助将不胜感激.