我是Rails(和StackOverflow)的新手,所以如果这是一个"愚蠢"的问题我很抱歉.我已经整理了一个非常简单的Rails应用程序.它从另一台服务器接收数据(通过HTTP POST).我想绘制发送的数据 - 特别是,我希望图表温度与时间.

我试图使用Flotilla生成这些图形,但我似乎找不到关于如何使用它的文档,除了主页上的一行示例:

        = chart("graph", {"Store 1" => {:collection => @store_one, :x => :date, :y => :sales }, "Store 2" => {:collection => @store_two, :x => :date, :y => :sales }})

这是我的index.html.erb:

<table>
  <tr>
    <th>Temperature</th>
    <th>Time</th>
  </tr>

<% for post in @posts %>
  <tr>
    <td><%=h post.temperature %></td>
    <td><%=h post.created_at %></td>
  </tr>
<% end %>
</table>
<%= chart("graph", { "Graph1" => { :collection => @posts, :x => :created_at, :y => :temperature }})%>
<br />

第一部分只是打印出温度和时间列表.这很好用.不幸的是,第二部分 - 实际图表 …

我想舍入(0位小数)flot图的x轴上的值.x-axix显示周数.有谁知道这是怎么做到的吗？

http://www.snowcams.eu/snowcondition/saas%20fee/998

我必须在X轴上显示日期,在Y轴上显示Amt.将有8行(系列),每行有n个月的数据.当我绘制图表时,我确实发送了6个月的数据.(一行数据如下所示)

[1251701950000,34.50553] [1254294030000,27.014463] [1256972350000,26.7805] [1259567970000,33.08871] [1262246430000,51.987762] [1264924750000,56.868233]

但是图表显示为http://twitpic.com/1gbb7m

第一个月标签丢失,上个月没有正确对齐,我的flot js代码如下

$.plot($("#lgdGraphTab"),graphData, { 
  xaxis: { 
    mode: "time",  
    timeformat: "%b-%y",
    monthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    minTickSize: [1, "month"]
  },
  yaxis : {
    tickSize: 5 
  },
  series: {
    lines: { show: true , shadowSize:0},
    points: { show: true }
  },
  legend:{  
    container: $('#legendArea'),
    noColumns:8
  },
  clickable: true,
  hoverable: true           
});

我正在使用jquery flot绘制实时图形,并且我在图形中运行10-15行[行数是动态的,所以可能是20或更多的时间],默认lineWidth是1,对于选定的一行我想改变lineWidth为3.

我更改了代码以设置所选行的数据[index] .lineWidth = 3,但它不起作用.

任何人都可以帮忙,如何在运行实时flot图中动态更改lineWidth？

谢谢

我有一个带有y轴坐标的浮点图,分别为55,110,220,440,880,1760.

我希望显示所有六个刻度,但我不希望显示刻度标签55和1760.

可以通过Flot Charts吗？

感谢名单

为什么我的y轴放错了地方,如何解决？我无法理解为什么'y'轴位于图表的顶部.任何想法都赞赏.

这些是我正在使用的选项.我已经尝试抓住生成的y轴类并手动使用css将其向左破解几个像素,但整个图形只是移位.据我所知,API中没有任何东西可以相对于图形移动y轴自动收报机标签.

    var options = {
    colors: ["#99CCFF", "#000099", "#FF6C47"],
    series: {
    lines: {show: true, highlightColor:'#000099'},
    points: {show: true}
    },
    xaxis: {
    mode: "time",
    timeformat: "%d/%m",
    markings: [{color: "#000"}],
    },
    yaxis: {
    markings: [{color: "#000"}]
    },
    grid: {
    markings: [{color: "#fff"}],
    labelMargin: 10,
    axisMargin: 10,
    backgroundColor: {
        colors: [ "#000099", "#29A3CC" ]
    },
    borderWidth: {
        top: 1,
        right: 1,
        bottom: 2,
        left: 2
    }
    },
    legend: {
    show: true,
    backgroundOpacity:.5,
    labelBoxBorderColor: 1,
    position: "nw",
    margin: 5
    }
};
$.plot("#bpTable", [ …

所以我遇到了Flot的问题.我有正确的所有数据,但唯一的问题是我的数据没有堆叠.我有堆栈:是的,但我做错了什么？

这是php中三个数组的输出

[["Lifting 1",4],["go 2",0],["Hub",0]]

[["Lifting 1",1],["go 2",106],["Hub",92]]

[["Lifting 1",50],["go 2",24],["Hub",46]]

<script type="text/javascript">

$(function() {

    var d1 = <?php echo json_encode($dataset_inb_dmg01); ?>;
    var d2 = <?php echo json_encode($dataset_inb_dmg02); ?>;
    var d3 = <?php echo json_encode($dataset_inb_dmg03); ?>;

    function plotWithOptions() {
        $.plot("#placeholder", [ d1, d2, d3 ], {
            series: {
                stack: true,
                bars: {
                    show: true,
                    barWidth: 0.6,
                    align: "center"
                }
            },
            xaxis: {
                mode: "categories",
                tickLength: 0
            }
        });
    }
    plotWithOptions();
});

</script>

您好我使用FLOT图表API在我的应用程序中以条形图的形式显示数据.我要求在条形图和类别中显示数据与Pre Data和Post数据有关,如图所示

样本图

请告诉我如何将数据绘制成条形图

http://jsfiddle.net/Margo/yKG7X/1/ 我正在使用工具提示功能,如小提琴.

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

                    var x = item.datapoint[0],
                        y = item.datapoint[1];
                    showTooltip(item.pageX, item.pageY, x + " / " + y + " for " + item.series.label);
                    }
    });

我在我的图表中添加了几条图形线,我想扩展函数以显示所有线条的所有点(应该说类似于:2/3表示数据2 2/3表示数据3)当线条相互"过度"时.但我不知道如何找到悬停点下是否有其他点.

在我的小提琴示例中,工具提示仅显示其中一个数据集的点,但两者都指向[0,1],[1,2],[2,3]

谢谢你的帮助!

所以我用flotcharts库生成了这个图表:

HTML是:

<div class="demo-container">
    <div id="legend-container"></div>
    <div id="placeholder" class="demo-placeholder"></div>
</div>

现在,我想将图例放在图表之外.所以我开始在我的情节选项中使用它:

var options = {
    ...,
    legend:{         
        container:$("#legend-container"),
    }
    ...
}

而CSS:

#legend-container {
    background-color: #fff;
    padding: 2px;
    margin-bottom: 8px;
    border-radius: 3px 3px 3px 3px;
    border: 1px solid #E6E6E6;
    display: inline-block;
    margin: 0 auto;
}

结果是:

那很棒!但是现在我想放置图例,而不是放在图表的顶部(或底部),而是放在图表旁边的空白和空白处.

怎么做？

为了完整起见,我的其余CSS是:

.demo-container {
    box-sizing: border-box;
    width: 750px;
    height: 300px;
    padding: 20px 15px 15px 15px;
    margin: 15px auto 30px auto;
    border: 1px solid #ddd;
    background: #fff;
    background: linear-gradient(#f6f6f6 0, #fff 50px);
    background: -o-linear-gradient(#f6f6f6 …