如何将文本添加为​​jqplot canvasOverlay？

Question

我想在jqplot图表上叠加一个标签.标签应包含文本或理想情况下的任何标记.我已经检查了文档和示例,但在主jqplot图表区域中找不到任意标签的示例.

jqplot的相关功能:canvasOverlay用于在图表上绘制任意线条.此外,"标题"标签存在,但位于图表之外.

看起来这应该很简单.一些选择:

1. 更改主标签的jqplot CSS以将其移动到图表内.
2. jqplot中的新标签.
3. 问题范围实际上是在jqplot之外,适当的解决方案是使用Canvas的通用解决方案.

提前致谢!

Answer 1

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

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

Answer 2

尝试在 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>