如何添加文本作为jqplot画布覆盖?

I'd like to overlay a label on a jqplot chart. The label should consist of text or ideally, any markup. I've examined the documentation and examples, and can't find examples of arbitrary labels in the main jqplot chart area.

我想在jqplot图表上覆盖一个标签。标签应该包含文本或理想的任何标记。我已经检查了文档和示例，在主要的jqplot图表区域中找不到任意标签的示例。

Related features of jqplot: canvasOverlay is used to draw arbitrary lines on the chart. Additionally, the 'title' label exists, but sits outside the chart.

jqplot的相关特性:canvasOverlay被用于在图表上绘制任意线。此外，“title”标签存在，但不在图表中。

It seems like this should be simple. Some options:

看起来这应该很简单。一些选项:

Change jqplot CSS for the main label to move it inside the chart.
更改主标签的jqplot CSS以将其移动到图表中。
New label in jqplot.
jqplot的新标签。
Problem scope is really outside jqplot, and proper solution is generic using Canvas.
问题范围实际上在jqplot之外，正确的解决方案是使用Canvas的通用解决方案。

Thanks in advance!

提前谢谢!

3 个解决方案

#1

Found a solution, posted by Chris Leonello the jqplot author to the google groups in 2010: https://groups.google.com/forum/?fromgroups=#!topic/jqplot-users/GDZW4BsDMiA

找到了一个解决方案，jqplot作者Chris Leonello在2010年发布给谷歌组:https://groups.google.com/forum/?fromgroups=#!topic/jqplot-users/GDZW4BsDMiA

Chris' solution is to place this line after the plot1 code, and it works well for me.

Chris的解决方案是将这一行放在plot1代码之后，这对我来说很合适。

mytitle = $('<div class="my-jqplot-title" style="position:absolute;text-align:center;padding-top: 15px;width:100%">My Custom Chart Title</div>').insertAfter('.jqplot-grid-canvas');

mytitle = $('

My Custom Chart Title

').insertAfter('.jqplot-grid-canvas');

#2

Try doing it in HTML5 Canvas, like this:

尝试在HTML5 Canvas上实现它，如下所示:

<script type="text/javascript">
window.addEventListener('load', function () {
  // Get the canvas element.
  var elem = document.getElementById('chart1');
  if (!elem || !elem.getContext) {
    return;
  }

  // Get the canvas 2d context.
  var context = elem.getContext('2d');
  if (!context) {
    return;
  }

  // Let's draw "Hello world!" in blue.
  context.fillStyle    = '#00f';

  // The font property is like the CSS font property.
  context.font         = 'italic 30px sans-serif';
  context.textBaseline = 'top';

  if (context.fillText) {
    context.fillText('Hello world!', 0, 0);
  }

  // It looks like WebKit doesn't support the strokeText method.
  // Tested on Ubuntu 8.10 Linux in WebKitGTK revision 38095 (2008-11-04, svn 
  // trunk build).
  context.font = 'bold 30px sans-serif';
  if (context.strokeText) {
    context.strokeText('Hello world!', 0, 50);
  }
}, false);
</script>

#3

You can force the title over the chart using HTML tags:

您可以使用HTML标记在图表上强制标题:

title = {
  text : "<div style='top:20px; left:80px; position:absolute; z-index:55;'>YOUR TITLE HERE</div>",
  show : true,
  fontSize : '12pt',
  textAlign : 'left',
  textColor : '#333',
  escapeHtml : false,
}

#1