标签: flot

我试图在我的flot图上为我的一个数据系列使用不同的符号,因为它比其他数据大得多.我使用此示例作为参考:http://www.flotcharts.org/flot/examples/symbols/index.html

这是我到目前为止:

我的包括:

<script  type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.flot.js"></script>
<script type="text/javascript" src="jquery.flot.symbol.js"></script>

然后我配置我的flot选项如下:

var options = {
        grid: {hoverable : true},
        xaxis: { mode: "time", timeformat: "%H:%M", tickLength: 1},
        series: { points : { show: true } }
        };

然后,我实际绘制数据:

 $.plot('#placeholder', [{
               data: my_data,
               lines: { show : true},
               points: { symbol: "square"},
               color: '#CB4B4B',
               label: 'My Data'
               }], options);
        }

但是,flot仍然将点绘制为默认圆.我在firebug中没有收到任何错误消息,我甚至尝试在jquery.flot.symbol.js库本身中添加一条日志消息,看看"square"处理程序是否被调用如下:

var handlers = {
            square: function (ctx, x, y, radius, shadow) …

使用浮点图，我想指定在 y 轴上显示的最小刻度数。就我而言，我希望始终显示至少 10 个刻度（值 1-10），但如果我的 y 轴最大值超过 10，那么我希望 flot 使用正常刻度算法绘制图表。我目前通过为刻度参数指定一个函数来实现它的工作。

ticks: function(axis){
           var ticks = [];
           if(axis.max < 10){
                ticks = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
           }
           else{
             for(var i = 1; i < axis.max; i++){
                 ticks.push(i);
             }
           }
           return ticks;
}, 

这样做的问题是，当 大于 10 时，我得到的刻度数比我想要的多得多。axis.max有没有办法避免这种情况？

我原本以为我可以返回 null，但 flot 期望返回一个数组。:(

I am using flot library to draw pie chart. I want to draw pie chart having combination of legend & pie labels. Wherein pie labels will only display slice percentage & corresponding label information from data series will be displayed in legend. Is this combination possible using flot charts?

我正在使用flot chart API来显示图表,并且我成功地绘制了数据.我在一个页面中加载大约30个图表,我在ui-tab中渲染它们.所有图形都完美呈现,页面工作正常.但我仍然收到此错误.我对所有图形使用了不同的div id,高度和宽度都给了所有的div.我从昨天起就无法找到解决方案.我在中央页面中包含了flot所需的所有js.请帮助我这方面.

如何格式化我的 y 轴标签以显示两个小数位我检查了我的代码，结果是，不是显示 14.59，而是显示 15.00，这是我的代码如下：

$.plot("#placeholder", data, {
                xaxis: {
                    min: minDate,
                    max: maxDate,
                    mode: "time",
                    tickSize: setTickSize,
                    monthNames: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]
                },
                yaxis: {
                    min: yMin,
                    max: yMax,
                    ticks: 1,
                    tickSize: 1,
                    tickDecimals:2
                },
                series: {
                    lines: {
                        show: true,
                        fill: true
                    },
                    points: {
                        show: false
                    }
                },
                grid: {
                    borderWidth: 1,
                    hoverable: true
                }
            });

我读过我可以使用 tickFormatter 函数，但我也不知道该把它放在哪里。

我正在尝试将Flot图表集成到 React 中，但我得到$.plot的不是函数错误，我有以下代码

脚本标签 Index.html

<script src="dist/libs/js/jquery.min.js"></script>
<script src="dist/libs/js/jquery.flot.js"></script>
<script src="dist/libs/js/jquery.flot.stack.js"></script>
<script src="dist/libs/js/jquery.flot.symbol.js"></script>

我的反应组件

class OfferGraph extends React.Component {
  constructor(){
    super();
    this.state ={
      isLogged:false
    }

    //Test Code 
    let node = $('#trackInsightGraph');
    $.plot(node, [{
      data: data['searchAverage'],
      points: {show: false}
    }, {
      data: data['offer'],
      points: {show: false}
    }, {
      data: data['similar'],
      points: {show: false}
    }, {
      data: data['c01'],
      lines: {show: true}
    }], options);
  }

  render(){
    return <div id="trackInsightGraph">
    </div>
  }

}
export default OfferGraph;

我不能使用另一个 Chart 库，因为大多数功能是为Flot …

有人知道jQuery Flot模式:时间是如何工作的？

yaxis: {
    mode: "time",
    timeformat: "%H:%M"

},

jQuery Api在文档中很容易发布:http: //flot.googlecode.com/svn/trunk/API.txt

您应该如何将数据提供给图表？很快？

我陷入了一些问题.你可能已经看过一个动画线,它在很多应用中就像一个扫描仪.那我有类似的东西,但我需要它在图表中.

我真正需要的是我需要绘制一条垂直线,它自动从一个点移动到另一个点.

让我给你一些解释:1.我有一个按钮2.我按下按钮,图形区域出现.3.在图形区域中,垂直线滚动该区域,就像扫描该区域一样.

我可以绘制线条,但它有点倾斜.其背后的逻辑如下:

for(i=0;i<frequencyArray.length;i++){
                 myTestArray2.push([i,outFrequencyArray[i]]);
            }

plot.setData([
              {data:myTestArray2,lines:{fill:false,lineWidth:3},shadowSize:10}
                    ]);

function setUpflot(){
            // setup plot

             //console.log("setUpflot");
             var options = {
                // series  : { shadowSize: 0, splines: {show:true,lineWidth:1}},
                 series  : { },

                 yaxis   : { ticks: 5, tickColor:"rgba(148,129,151,0.5)", min: minGraphY, max:maxGraphY,show: true},
                xaxis   : { tickLength:0,  show: false },
                grid    : { borderWidth:0,markings:[
                                {yaxis: { from: 200.0, to: 240.0 },color: "rgba(140,2,28,0.5)"}
                        ]}
             };

我有一个字符串

    string flotdata="[[1,2],[3,6],[8,10]]"

如何将此转换为javascript数组,以便我可以在jquery flot pluggin系列数据中使用它.

这个字符串返回到那里需要转换为javascript数组的脚本

我需要在Jquery Flot图表中添加标签.目前它只提供鼠标悬停的标签,而不是我需要在栏后显示标签.我附上了一个图像和这个问题.在hash(#)的位置我需要在那里放置条形标签.请给我一个解决方案.提前致谢.

 for (i = 0; i < bardata.length; i++)  {

            ds.push({
                label: yearArry[i],
                data : bardata[i],
            });

    }
var options = {
        colors : colorArray,
        grid : {
            hoverable : true,
            clickable : true,
            tickColor : $chrt_border_color,
            borderWidth : $chrt_border_width,
            borderColor : $chrt_border_color,
        },
        series: {
            stack:true,
            bars: {
                show : true,
                barWidth : 0.8,
                horizontal: true,
                align: "center"
            }
        },
        xaxis: {
            tickFormatter: function(val, axis) { return val < axis.max ? abbreviateNumber(val) : "Cost"; }
        },
        yaxis: { …