本人在官网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);