Опция названия карты?

Ответ 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);

Ответ 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');
  

Ответ 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);