标签: flot

目前,我的折线图显示了沿x轴的JSON数据集中格式正确的时间戳.

例:

xaxis: { mode:"time", timeformat: "%y/%m/%d %H:%M:%S%p"}

输出类似于:

2010/12/6 05:32:32 pm

我也有可靠的数据点.

当我将鼠标悬停在它显示的数据点上时

(1291656755000,1368ms)

其中1291656755000是原始时间戳,以毫秒为单位.

我喜欢1291656755000显示为2010/12/6 05:32:32 pm,当我将鼠标悬停在数据点上时,它就像在x轴上一样.

默认情况下,flot生成了图例块(表格),如下所示([#] - 颜色框):

_________________
|_[#]_|_label_1_|
|_[#]_|_label_2_|
|_..._|_......._|

我想要这样的横向传奇:

______________________________.______________________________
|_[#]_|_My_long_label_1_______|_[#]_|_My_another_label_2____|
|_[#]_|_Trololo_label_here____|_[#]_|_hell,_yeah!___________|
.............................................................

我已经尝试过使用labelFormatter()但是失败=(

我为每个系列元素添加了订单号,可以在labelFormatter()中使用它(如... if(series.num%2 == 0){... next row ...}

我希望能够捕获链接到所有轴刻度的点击事件.这是我到目前为止所做的.

http://jsfiddle.net/grVFk/5074/

如果有人知道如何使用任何图表插件可以友好分享.

谢谢

如何在图表顶部创建更多空间？

现在我明白了:

但我想要这个:

这是我的JS代码:

$("table.chart").each(function() {
    var colors = [];
    $("table.chart thead th:not(:first)").each(function() {
        colors.push($(this).css("color"));
    });
    $(this).graphTable({
        series: 'columns',
        position: 'replace',
        width: '100%',
        height: '200px',
        colors: colors
    }, {
        xaxis: {
            tickSize: 1
        }
    });
});

我有下面的图表,我想在图例项之间添加空格.我尝试将空格附加到传递给标签的字符串,但没有成功.有任何想法吗？TIA

code

       $(document).ready(function() {
            $.plot($("#NR"), NRLine,  {
                grid: {
                    backgroundColor: "#E5E5E5",
                    hoverable: true
                },
                xaxis: {
                    mode: "time",
                    timeformat: "%m/%d",
                    minTickSize: [7, "day"],
                    ticks: datearray


                        },
                        legend: {


                        noColumns: 4,
                        container: $("#chartLegend")} 


    }
     );
        });     

code

我正在寻找一种通过触发外部按钮点击来激活jquery flot折线图上的/某些数据点的方法.我怎么能这样做 - 如何在不使用鼠标的情况下获得数据点的句柄 - 我将如何激活它并激活工具提示？

感谢您的任何专家建议!

我无法在Flot中获得一致的条宽.我有的图表可以有1到10个数据点.当有10个数据点时,条形图的大小正确.但是,当数据点少于10时,图表中的条形开始变胖.以下两张图片证明了这一点.

当有10个项目时,酒吧的大小适中.

当只有一件商品时,酒吧变得非常大.

我知道这个barWidth属性,我试过改变它.问题是它只影响图表中条形图的大小,只有10个项目,但它只留下图表中的胖条.

我还在某处读过我可以尝试更改div包含图表的高度,但我想避免这种情况,因为我希望图表具有固定的尺寸,而不管显示的项目如何.

我有一个图表(图像波纹管),其中绿线参考2014年,紫色线将是2013年.

var data1 = [
        [gd(2014, 1, 1), 4], [gd(2014, 2, 1), 8], [gd(2014, 3, 1), 4], [gd(2014, 4, 1), 10],
        [gd(2014, 5, 1), 4], [gd(2014, 6, 1), 16], [gd(2014, 7, 1), 5]];    

    var data2 = [
        [gd(2014, 1, 1), 1], [gd(2014, 2, 1), 0], [gd(2014, 3, 1), 2], [gd(2014, 4, 1), 0],
        [gd(2014, 5, 1), 1], [gd(2014, 6, 1), 3], [gd(2014, 7, 1), 1], [gd(2014, 8, 1), 5],
        [gd(2014, 9, 1), 2], [gd(2014, 10, 1), 3], [gd(2014, 11, 1), …

我想沿y轴删除刻度值(3.5,3.0,2.5,2.0,1.5,1.0,0.5,0.0).有关更多信息,请参见下图.如果无法删除则必须有一些选项来更改颜色.我会让它透明.

var data = [{data: [[0,1]], color: "red"},
            {data: [[1,2]], color: "yellow"},
            {data: [[2,3]], color: "green"}];

$.plot("#placeholder",data, {
    series: {
        bars: {
            show: true,
            barWidth: 0.3,
            align: "center",
            lineWidth: 0,
            fill:.75
        }
    },
    xaxis: {
        ticks: [[0,"Red"],[1,"Yellow"],[2,"Green"]]
    }
});

以下是我关注的示例:http://jsfiddle.net/TPp8m/

我有一个表通过laravel php显示数字.这些数字基于一周的时间段,并且与每天相关联的值在刷新时相应地更新.现在我需要在flot图表中获取这些数据.典型的flot图表将具有如下静态点:

var data = [[0, 0], [1, 10], [2,5], [3, 12], [4, 9], [5, 4], [6, 2]];

但我需要每个点都是动态的:

@foreach($days as $day)
 var data = [[{{ $day['carbon']->format('F j, Y') }},{{ $day['total'] }}]]
@endforeach 

当然,这打破了图表,但它不起作用.我有点被困在这里.任何建议将不胜感激.