浮动图表标题选项？答案

【问题标题】：Flot chart title option?浮动图表标题选项？
【发布时间】：2011-11-03 00:36:27
【问题描述】：

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

但我可能错过了什么。

【问题讨论】：

标签： graph charts title option flot

【解决方案1】：

我认为这个选项不存在。不过，使用常规 HTML 为绘图命名非常容易。只需将一个 div 包裹在您的“占位符”div 周围，然后在其中添加标题文本。

【讨论】：

【解决方案2】：

绘制浮点图（绘图功能）后用文本填充画布（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);

【讨论】：

当同一页面上有多个图表时，这不起作用。
它也不适用于视网膜显示器。您需要在“var cx”行下添加以下行：if (window.devicePixelRatio > 1) { cx = cx/window.devicePixelRatio; } 以对此进行调整。

【解决方案3】：

您可以为此使用挂钩。例如使用覆盖挂钩，并在单独的OverlayHandler 中实现覆盖功能

这是一个示例，其中chartElement、chartData 和chartOptions 分别是您的 HTML 元素和浮点数据和浮点选项。：

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

【讨论】：

plot.width() 不靠谱，yaxis大的时候会是射手。改用cvs.canvas.width，它会使标题固定在中心位置。

【解决方案4】：

Pioja 的回答确实很棒。他的 jsFiddle 显示了完整的细节。在您的选项中包含以下内容很重要：

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

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

【讨论】：

【解决方案5】：

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

【讨论】：