Flot是否有选项可以设置图表的标题?我没有看到整个图表的选项,只有轴的选项。
但是我可能错过了一些东西。
我不认为这个选项存在。不过,使用普通的HTML很容易就能给图表加上标题。只需在你的“占位符”div周围包装一个div,并将标题文本添加到其中即可。
You can use hooks for that. For instance use the overlay hook, and implement your overlay functionality in a separate OverlayHandler
Here is an example, where the chartElement
, chartData
and chartOptions
are your HTML element and flot data and flot options, respectively.:
var plotOverlayHandler = function(plot, cvs) {
if(!plot) { return; }
var cvsWidth = plot.width() / 2;
var text = 'Flot chart-title!';
cvs.font = "bold 16px Open Sans";
cvs.fillStyle = "#666666";
cvs.textAlign = 'center';
cvs.fillText(text, cvsWidth, 30);
return cvs;
};
var plot = $.plot(chartElement, chartData, chartOptions);
plot.hooks.drawOverlay.push( plotOverlayHandler );
When exporting the canvas via the native toDataURL
method, simply apply the OverlayHandler first. This allows for greater flexibility.
var elCanvas = $('canvas.flot-base').first();
var canvas = plotCanvasOverlay(elCanvas, elCanvas.get(0).getContext('2d'))
var dataUrl = canvas.toDataURL('image/png');
在绘制flot图表(plot函数)之后,用文本填充画布(jsFiddle)。我的解决方案的优点是,您可以将包含标题的图表保存为图像。
var c=document.getElementsByTagName("canvas")[0];
var canvas=c.getContext("2d");
var cx = c.width / 2;
var text="Flot chart title";
canvas.font="bold 20px sans-serif";
canvas.textAlign = 'center';
canvas.fillText(text,cx,35);
if (window.devicePixelRatio > 1) {
cx = cx/window.devicePixelRatio;
}
在“var cx”行下面进行调整。 - Jamie Ciocco在pioja的回答基础上,标题可以直接在绘图完成后设置:
var plot = $.plot($("#"+PlotPlaceholder), data, options);
var c = plot.getCanvas();
var canvas=c.getContext("2d");
var cx = c.width / 2;
var text="Flot chart title";
canvas.font="bold 20px sans-serif";
canvas.textAlign = 'center';
canvas.fillText(text,cx,35);
canvas: true,
grid: {
margin: { top:50 }
}
plot.width()
不可靠,当yaxis
很大时会出现问题。请使用cvs.canvas.width
,它可以使标题固定在中心位置。 - Flying Fisher