标签: flot

我正在使用google flot chart,它根据用户选择的值显示图表.图表显示x轴上的年份和y轴上的价格.

问题是如果图形宽度很小,它会正确显示值.例如,如果我将宽度设置为

<div id="placeholder" style="width:500px;height:300px"></div>

但如果图形宽度增加就像

<div id="placeholder" style="width:650px;height:300px"></div>

图表显示x轴上不需要的零,例如

Insted of  2010  it shows  2010.0
Insted of  2011  it shows  2011.0
Insted of  2012  it shows  2012.0

我只是想摆脱这些不必要的零.谷歌根本没有帮助我,我完全不知道这种愚蠢的行为.

我遇到了另一个小堆积条问题:填充图表时,flot会自上而下地添加图例条目并自下而上堆叠条形图.通过这种方式,图例与条形图完全相反.

flot API允许按照添加顺序,按字母顺序或通过提供自定义排序功能对标签进行排序.我已经尝试提供一个总是返回-1的排序函数,这样原来的排序就会反转但是由于某种原因,sorted当使用堆叠条时,似乎根本没有评估该选项.至少没有我想有(ascending,descending,false,我自己的功能)对实际传奇任何影响.

我在http://jsfiddle.net/YvGZu/1/上整理了一个测试用例来说明问题.

编辑:经过一些更多的测试......可能是传说排序一起被打破了吗？

我正在使用JQuery Flot创建一些图形.到目前为止,我已经设法使用tickformatter格式化我的Ticks

该图如下所示:http://i1358.photobucket.com/albums/q779/Angel_Ruiz_Morales/Capture.gif

我现在唯一的问题是我希望Ticks显示如下:Today \n {TIME}

我已经尝试添加\n字符并看到它附加但由于某种原因flot仍然显示今天{TIME}内联而不是单独的行.

有没有人知道引入新线路的方法？

谢谢!

我怎样才能去掉white line之间slices和background在Flot pie chart？

我的jsfiddle

正如你所看到的那样:

我希望它看起来像那样(忽略我糟糕的艺术技巧):

我的代码:

$(function () {
     var data = [
    { label: "Read", data: 50, color: '#614E43' },
    { label: "Unread", data: 150, color: '#F5912D' }];
      $.plot($("#star"), data, 
      {
        series: {

          pie: { 

              radius: 0.2,  
            innerRadius: 0.125,
            show: true
          }
        }
      });
});

我正在使用Flot jQuery插件在我的网站上呈现图形.它在最新版本的Chrome中运行良好,但在Firefox和Internet Explorer中似乎失败了.我使用的是Firefox 21版和Internet Explorer 10版.这是相关的代码:

$(document).ready(function() {

    var currentURL = window.location;

    // This will hold our plot data
    var playersPlots = [];
    var pingPlots = [];

    // Make an AJAX request to get the server stats
    $.get(currentURL + '/stats.json', function(data) {
        $.each(data.stats, function(index, value) {
            playersPlots.push([new Date(value.ServerStat.created).getTime(), value.ServerStat.players]);
            pingPlots.push([new Date(value.ServerStat.created).getTime(), value.ServerStat.ping]);
        });

        $.plot($('#server-stats'), [{label: 'Players', data: playersPlots}, {label: 'Ping (ms)', data: pingPlots}], {
            xaxis: {
                mode: 'time',
                timeformat: '%I:%M',
                'tickSize': [3, "hour"]
            }
        });
    }, 'json');

}); …

我正在使用jquery flot库来绘制条形图.我的图表中的条纹总是太薄,宽度约为2像素.但是当我设置lineWidth:15时,条形变为我想要的宽度,但是第一个和最后一个条形溢出图形边框.我找到了一个简单的测试flot条形图,点数有限,在本地实现时看起来很好.我的结论是,我可能有太多的数据,因此与点数相比,条形很薄.但是我希望有一种方法可以让条形图以其他方式变宽,并且它们不会溢出图形边框.任何建议都非常感谢.这是我有的:

$.plot(this.get('datasets'), {
    bars: {
       show: true,
       align: "center",
       fill: true,
       //lineWidth: 15
    },
    xaxis: {
       mode: "time",  //"categories",
       timezone: "browser",
       tickLength: 0
    }                   
});

我有一个可行的工具提示系统设置与我的常规图形选项(不使用破折号)通过使用plothover事件,但当我切换到我的"黑白"模式(使用破折号)时,情节是不可能的.有没有办法在使用破折号时保持图形可以浏览和可点击？还是一种在没有破折号的情况下制作体面的黑白图案的方法？

示例系列: {data: data, dashes:{show: true, dashLength: 2}, color: "black", label: "Series 1"}

我目前的图形选项:

options = {
      yaxis: {max: maxValue, min: minValue},
      grid: {hoverable: true, clickable: true},
      legend: {show: false},
      xaxis: {tickFormatter: null}
  };

我将plothover事件用于这样的工具提示:

$(this).bind("plotclick", function (event, pos, item){ //tooltip code here }

需要帮助在条形图上设置数据.

这是当前的工作

这就是它需要在百分比上查看缺少数据的方式

所以基本需要帮助顶部的数据/标签吧

这是javascript代码

  $(document).ready(function() {  
var d1_1 = [
    [1325376000000, 10],
    [1328054400000, 20],
    [1330560000000, 30],
    [1333238400000, 40],
    [1335830400000, 35]
];

var d1_2 = [
    [1325376000000, 80],
    [1328054400000, 60],
    [1330560000000, 20],
    [1333238400000, 90],
    [1335830400000, 30]
];

var data1 = [
    {
        label: "Product 1",
        data: d1_1,
        bars: {
            show: true,
            barWidth: 12*44*60*60*300,
            fill: true,
            lineWidth:0,
            order: 1,
            fillColor:  {
            colors: ["#80C3FD", "#0089FF"] 
        }
        },
        color: "rgba(243, 89, 88, 0.7)"
    },
    {
        label: "Product 2",
        data: d1_2,
        bars: {
            show: …

一些图表/绘图库,例如Python的matplotlib,具有主要和次要刻度的概念(具有相应的主要和次要网格线).我一直在四处寻找,我认为这在FLOT中不存在.似乎只有一类蜱.

是不是可以制作类似下面的东西,如果是,那怎么样？

例如,如下图所示,每1.0的主要滴答,每0.2的次要滴答.

我要做的就是标记我的x轴:

function doPlot(position) {//Flot
  $.plot("#placeholder", [//data
    {
      data: theta_plot,
      label: "Angle (rad)",
      yaxis: 1,
      color: "red"
    },
    {
      data: omega_plot,
      label: "Angular Velocity (rad/sec)",
      yaxis: 2,
      color: "green"
    },
    {
      data: e_plot,
      label: "Energy (J)",
      yaxis: 3,
      color: "blue"
    }
  ],//options
    {
      xaxis: {
        axisLabel: "Time (sec)",
        axisLabelUseCanvas: true
      },
      yaxes: [
        { font: { color: "red" } },
        { font: { color: "green" } },
        { font: { color: "blue" } },
        { alignTicksWithAxis: position === "left" …