jquery flot 开发记录

本人在官网http://www.flotcharts.org/下载最新版本的jquery flot v0.83

jquery 使用的是jquery-1.9.1.min.js.

开发中遇到问题怕以后又得百度，所以记下：

在当中看了很多http://www.jqueryflottutorial.com/cn/的帮助文档，问题如下：

1.在画柱状图时，出现js报错：

Error: Invalid dimensions for plot, width = 1098, height = 0 jquery.flot.js:135

百度了下这个问题，是由于

 <div id="placeholder" > 
 </div>

容器div没有设置高宽，如下：

<div id="placeholder" style="width:600px;height:400px">
</div> 

就OK了

2.柱状图的x轴显示错误，出现的是0，1，2....，本应显示我的数据“黄金”，“火影”...

       var data = [];
      data.push(['黄金',3000]);
      data.push([‘火影’,20000]);
     

原因是X轴是默认数字显示的, 如果没有指定x轴的刻度资料, x轴就只会显示0, 1, 2, ....

解决办法我发现有2个：

一是我们要自行建立x轴的刻度数据,     建立方式和数据源一样是用数组

      var data = [];
      data.push([0,3000]);
      data.push([1,20000]);
      data.push([2,1000]);

      var ticks = [];
      ticks.push([0,"黄金"]);
      ticks.push([1,"火影"]);
      ticks.push([2,"厦门"]);

然后在xaxis设置X轴就可以了，如下：

       xaxis: {
             ticks: ticks
       }

 

 

 二是使用mode: "categories"，导入jquery.flot.categories.js，数据格式直接使用最原始的数据就可以了，如下

var data = [];
data.push(['黄金',3000]);
data.push([‘火影’,20000]);

展示的效果是一样的，这种方法更简单。

同时使用这两种办法画时间x轴时，可以解决时间格式X轴不对齐的问题；如下：

var data = [];

data.push(['10/15',200]);

data.push(['10/16',100]);

xaxis: {
//      mode: "time",
//      tickSize: [1, "day"],
//      timeformat:"%m/%d"
//      ticks: tick
      mode: "categories",
      tickLength: 0

 },

3.我设置了X轴标签的属性却没反应，

    xaxis: {
        axisLabel: "热词",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 14,
        axisLabelFontFamily: 'Verdana, Arial',   
        axisLabelPadding: 10,
        ticks: ticks
   },

原来是Flot本身并不支持轴标签的设置, 所以需要透过加入jquery.flot.axislabels.js插件来达成轴标签的设置.   
导入这个js就可以了

 

 

 

 4.画圆形饼图

可参考http://people.iola.dk/olau/flot/examples/pie.html

或者http://www.jqueryflottutorial.com/cn/how-to-make-jquery-flot-pie-chart.html

要注意的是以下几点：

(1)与柱状图一样，如果不设置div的高宽，一样会报错，所以在画饼图之前要设置div的高宽

(2)如果想让label显示在饼图外面，可以不设置label的radius属性，默认就是在外面。

代码如下：

var options = {
             series: {
                    pie: {
                        show: true,
                        label: {
                            show: true,
                            //radius:0.8,
                            formatter: function (label, series) {
                                return '<div name="pieLabel_'+id+'" id="pieLabel_'+id+'_'+label+'" style="border:0px solid grey;font-size:8pt;text-align:center;padding:5px;color:white;">' +
                                label + ' : ' +
                                parseFloat(series.percent).toFixed(1)  +
                                '%</div>';
                            },
                        }
                    }
                },
                legend: {
                    show: false
                },
                grid: {
                    hoverable: true
                }
        };
        $("#biliTu_"+id).css("width",600);
        $("#biliTu_"+id).css("height",600);
        $.plot($("#biliTu_"+id), dataSet, options);