标签: flot

我有以下变量series:

var series: List[FlotSerie] = List(
  new FlotSerie() {
    override val label = Full("Min")
  },
  new FlotSerie() {
    override val label = Full("Max")
  },
  new FlotSerie() {
    override val label = Full("Avg")
  }
)

不幸的是,我使用以下方法获得编译器错误,该方法采用新数据点并series使用List[FlotSeries]基于新数据和旧系列的新数据进行更新.

def updateSeries(sample: Sample): List[FlotSerie] = {
  series = series.map(serie =>
    serie match {
      case item if item.label == Full("Min") => {
        new FlotSerie() {
          override val label = item.label
          override val data = (sample.timestamp.toDouble, sample.min) :: serie.data
        }
      } …

正如标题所述,我正在寻找一个空白的"模板"图表(我的意思是,网页将显示一个没有任何行的图表),这是我正在为工作而建立的财务计算器.网页的基本设置顶部会有一个空白图表,下面有一个HTML表单来接受数据输入.用户输入数据并单击提交后,图表应填充该数据.

由此产生了两个问题.首先,它甚至可能吗？其次,如果有可能,我会将什么传递给$ .plot()函数？以下是我目前正在使用的内容:

<div id="main-content">
    <div id="chart" style="width:600px;height:300px;"></div>
    <script type="text/javascript">
        $(document).ready(function() {
            $.plot($("#chart"), [[null]]);
        });
    </script>
</div>

任何建议将不胜感激!谢谢!

编辑:我忘了提这个.当我去查看此网页时,Firebug给出了以下错误消息:

未捕获的异常:绘图的尺寸无效,宽度= 928,高度= 0

编辑答案:似乎错误消息来自我使用div的width和height属性,而不是使用宽度和高度设置样式.修好后,它有效!此处显示的所有代码现在都能正常工

我有一个场景,我想根据复选框选择切换系列.我已使用图例选项中的labelFormatting将复选框添加到图例中,例如:

     var otherOptions = {
                           legend: {
                                     container: legend,
                                     labelFormatter: function (label, series) {
                                        var cb = '<input type="checkbox" name="' + label + '" checked="checked" id="id' + label + '"> ' + label;
                                        return cb;
                                     }
                            },
                         };  

我已经为图例添加了click事件,以便我可以根据选中的项目操作系列.一切正常,除非我在图例中取消选中标签,在重新绘制时它也会从图例中删除该系列线.所以对于前者,下面是前后图像:

之前

后

请注意,在图像"USA"复选框缺失之后.有什么方法我仍然可以在图例中显示未经检查的"USA"复选框吗？

我看了一下这里的建议:flot graph,使用图例打开/关闭系列

但唯一的问题是我不想将图例和复选框图例分开.关于给定链接的问题是在1年前回答的,所以我想我会抓住机会再次提出问题,以防有人知道这样做的方法.

请告诉我.

谢谢!

我已经按照示例代码嵌入了angular.js指令中的flot图表:https://gist.github.com/jrmoran/3966529

问题是外部chart元件的宽度和高度为零.这是我的测试代码:http://jsfiddle.net/pVEDL/.因此,我遇到布局问题.

另外,除非我在调用容器元素之前隐藏容器元素,否则$.plotflot会抛出一个异常,表示该图表的维度为零.为什么我必须隐藏容器元素？

我正在使用flot库来渲染PNG图像呈现为点的图.它工作正常,但每个PNG图像似乎渲染了三次.这在刷新时是可见的(重叠不完美),我还记录了图像的onload函数,Firebug告诉我每个图形被调用三次.这是渲染图像的函数(counter是日志记录变量):

function generateImageFunction (image) {
    return function getImage(ctx, x, y, radius, shadow) {                   
        var img = new Image();
        img.onload = function() {
            console.log(counter++);
            ctx.drawImage(img, x, y, img.width, img.height);    
        }
        img.src = image;
    }
}

数据有13个系列,这些只是前两个例子:

var data = [
            { 
             data: [[1, 1]], 
             points: { symbol: generateImageFunction("face-angel.png") }
            }
            { 
             data: [[2, 2]], 
             points: { symbol: generateImageFunction("face-angry.png") }
            }
           ];

我的选择是这些:

var options = {
               series: {
                   points: { show: true },
               },
               xaxis: { min: 0, max: 15},
               yaxis: …

我想了一些三分球得到一个海军报的"Hello World"相当于运行在我rails4应用程序.我发现了许多创建可爱图形的例子,但我坚持基础,比如,

• 一旦我下载并解压缩了flot-0.8.2.zip文件,我在哪里放置所有这些.js文件？
• 我需要所有这些.js文件吗？
• 我要添加什么app/assets/javascripts/application.js文件？
• ...等等.

我不想使用宝石 - 至少现在还没有 - 因为我想知道引擎盖下发生了什么.

我正在尝试使用x轴生成月,年的图表.请查看以下内容:

图表的数据通过ajax获得.请查看以下样本json:

{"total":[[2013,4,0],[2013,5,0],[2013,6,0],[2013,7,0],[2013,8,0],[2013,9,0],[2013,10,475],[2013,11,0],[2013,12,0],[2014,1,367],[2014,2,0],[2014,3,0]],"critical":[[2013,4,0],[2013,5,0],[2013,6,0],[2013,7,0],[2013,8,0],[2013,9,0],[2013,10,0],[2013,11,0],[2013,12,0],[2014,1,1],[2014,2,0],[2014,3,0]],"high":[[2013,4,0],[2013,5,0],[2013,6,0],[2013,7,0],[2013,8,0],[2013,9,0],[2013,10,20],[2013,11,0],[2013,12,0],[2014,1,20],[2014,2,0],[2014,3,0]],"medium":[[2013,4,0],[2013,5,0],[2013,6,0],[2013,7,0],[2013,8,0],[2013,9,0],[2013,10,24],[2013,11,0],[2013,12,0],[2014,1,135],[2014,2,0],[2014,3,0]],"low":[[2013,4,0],[2013,5,0],[2013,6,0],[2013,7,0],[2013,8,0],[2013,9,0],[2013,10,42],[2013,11,0],[2013,12,0],[2014,1,26],[2014,2,0],[2014,3,0]]}

在上面的例子中[2013,4,0]应转换为x轴:2013年4月,y轴:0.

你能告诉我怎么做到这一点吗？

谢谢.

我正在检查Flot中的Stacked Charts,我在条形图中发现了一些奇怪的东西.

我试过用这个:http: //jsfiddle.net/zNXBd/41/

在此示例代码中,尝试将鼠标悬停在堆叠线上.哈弗正在工作.现在,这一次,请尝试将"行"更改为"栏"并再次运行.

ds.push({
    data:completes,
    label: "Complete",
    yaxis: 2,
    stack:true,
    bars: {
        show: true, 
        fill: true, 
        order: 2,
    }
});
ds.push({
    data:screeners,
    label: "Pre-Screened",
    yaxis: 1,
    bars: {
        show: true, 
        fill: true, 
        order: 1,
    }
});
ds.push({
    data:holds,
    label: "Holds",
    yaxis: 2,
    stack:true,
    bars: {
        show: true, 
        fill: true, 
        order: 3,
    }
});

请注意,酒吧不再是可以搬运的.似乎这部分存在问题.

你能帮我解决一下这个问题吗？

我使用angularjs flot和slider来显示一些图表,并根据范围选择,数据可视化应该在flot图表中更改.

我的问题是根据范围选择可视化数据的最佳方法是什么？我是否需要在每次选择范围时添加/删除flot图表数据,还是有更好的方法？我在下面提供了我的源代码和一些截图.请帮忙.

注意:$scope.tasksRunDataChartObject;来自服务器的json数据为flot chart格式化

滑块截图和代码

<rzslider rz-slider-floor="reportTasksRunRange.floor" 
    rz-slider-ceil="reportTasksRunRange.ceil" 
    rz-slider-model="reportTasksRunRange.min" 
    rz-slider-high="reportTasksRunRange.max" 
    rz-slider-translate="translate" rz-slider-step="{{reportTasksRunRange.step}}"></rzslider>

<flot dataset="tasksRunData" options="tasksRunChartOptions" class="center-block" width="100%" height="400px" ></flot>

$scope.reportTasksRunRange = {
    min: 1412380800000,
    max: 1412812800000,       
    floor: 1412380800000,
    ceil: 1412812800000,
    step: 1412467200000-1412380800000
};

$scope.translate = function(value) {
    var monthNames = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ];
    var myDate = new Date( value );
    return myDate.getDate() + " " + monthNames[myDate.getMonth()] + " '"+myDate.getFullYear();
}

$scope.$on('slideEnded', …

我正在绘制一个点图，并且该图应该每5秒更新一次新数据。最小和最大范围始终固定

当前，当我从服务器获取新数据时，确实会将新数据合并到现有的source.data中并绘制出完整的图形。

因此，我不想一次又一次地重绘完整的数据。随着source.data长度的增加，性能下降。因此，除了重新绘制完整的数据，我还可以仅将新数据添加到现有图形中

请在这里找到源代码

var source = [
    { 
        data: [], 
        show: true, 
        label: "Constellation", 
        name: "Constellation",
        color: "#0000FF",
        points: { 
            show: true,
            radius: 2, 
            fillColor: '#0000FF'
        }, 
        lines: {
            show: false 
        }
    }
]

var options = {...}

$.getJSON(URL , function(data) {
   ...
   $.merge(source[0].data, new_data);
   plotObj = $.plot("#placeholder", source, options);
}