Опция заголовка флота?

Question

Есть ли у Flot опция, которую можно установить, чтобы дать графику заголовок? Я не вижу одного для общей диаграммы, только для осей.

Но я мог что-то упустить.

Answer 1

Я не думаю, что эта опция существует. Тем не менее, довольно легко назвать сюжет с помощью обычного HTML. Просто оберните div вокруг вашего div и добавьте к нему текст заголовка.

Answer 2

1. Для этого можно использовать крючки.Например, используйте перехват над оверлеем и реализуйте свою функцию наложения в отдельном OverlayHandler

   . Вот пример, где chartElement, chartData и chartOptions - это ваш элемент HTML и данные с плавающей запятой иПараметры 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 3

после рисования флот-диаграммы (функция 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);

Answer 4

Опираясь на ответ пиоджи, заголовок может быть установлен сразу после того, как сюжет составлен с помощью:

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

Используя функцию getCanvas:

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

Answer 5

Ответ Пиохи действительно велик. Его jsFiddle показывает полную информацию. Важно, чтобы в ваши параметры входило следующее:

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

После этого будет вставлен красивый заголовок диаграммы, который можно включить в изображение, если вы его экспортируете.