绘制图表标题选项？

Question

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

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

Answer 1

我不认为这个选项存在。但是，使用常规HTML标题图很容易。只需在“占位符”div周围包含一个div，然后将标题文本添加到其中。

Answer 2

绘制flot chart（绘图函数）后用文本填充画布（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);

Answer 3

1. 你可以使用钩子。例如，使用叠加层挂钩，并在单独的OverlayHandler

   中实现叠加功能

   以下是一个示例，其中chartElement，chartData和chartOptions分别是您的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 );
   

2. 通过本机toDataURL方法导出画布时，只需先应用OverlayHandler即可。这样可以提供更大的灵活性。

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

Answer 4

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

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

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

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