Graph Flot图表标题选项？

Flot是否有可设置为图表标题的选项？我没有看到一个用于整体图表，只是用于轴

---

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

我认为这个选项不存在。不过，使用常规HTML为绘图命名是相当容易的。只需在“占位符”div周围环绕一个div，并将标题文本添加到该div中。

绘制flot chart（绘图功能）后，用文本填充画布（）。我的解决方案的优点是，您可以将图表另存为包含标题的图像

例子：

---

Pioja的答案确实是一个伟大的答案。他的JSFIDLE显示了全部细节。在您的选项中包括以下内容非常重要：

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

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

你可以用钩子。例如，使用覆盖钩子，在一个单独的

OverlayHandler

下面是一个示例，其中

图表元素

、

图表数据

和

图表选项

分别是HTML元素和flot数据以及flot选项：

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

当通过本机

toDataURL

方法导出画布时，只需首先应用OverlayHandler。这允许更大的灵活性

var elCanvas = $('canvas.flot-base').first();
var canvas = plotCanvasOverlay(elCanvas, elCanvas.get(0).getContext('2d'))
var dataUrl = canvas.toDataURL('image/png');

---

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

---

当同一页上有多个图表时，这不起作用。它也不适用于视网膜显示器。您需要在“var cx”行下添加以下行：

如果（window.devicePixelRatio>1）{cx=cx/window.devicePixelRatio；}

对此进行调整。

plot.width（）

不可靠，则当yaxis较大时，它将成为shooter。改为使用

cvs.canvas.width

，它将使标题固定在中心位置。

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