Flot图表标题选项？

Question

Flot是否有选项可以设置图表的标题？我没有看到整个图表的选项，只有轴的选项。

但是我可能错过了一些东西。

- Colleen

Answer 1

我不认为这个选项存在。不过，使用普通的HTML很容易就能给图表加上标题。只需在你的“占位符”div周围包装一个div，并将标题文本添加到其中即可。

- Mark

Answer 2

1. 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, chartDataand 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 );
   

2. 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');
   

- Lorenz Lo Sauer

---

plot.width() 不可靠，当 yaxis 很大时会出现问题。请使用 cvs.canvas.width，它可以使标题固定在中心位置。 - Flying Fisher

Answer 3

在绘制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);

- pioja

---

当同一页上有多个图表时，这种方法无法正常工作。 - Matt

它也不支持视网膜显示屏。您需要添加以下行：if (window.devicePixelRatio > 1) { cx = cx/window.devicePixelRatio; }在“var cx”行下面进行调整。 - Jamie Ciocco

Answer 4

在pioja的回答基础上，标题可以直接在绘图完成后设置：

var plot = $.plot($("#"+PlotPlaceholder), data, options);

通过使用 getCanvas 函数：

var c = plot.getCanvas();

现在，只需按照pioja的代码来获取：

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);

- SupAl

Answer 5

Pioja的回答确实很好。他的jsFiddle展示了所有细节。在您的选项中包含以下内容非常重要：

canvas: true,
grid: {
    margin: { top:50 }
}

这将插入一个漂亮的图表标题，如果您导出图像，则可以包含在其中。

- Slaphead