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

Question

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

jqplot的相关特性：canvasOverlay用于在图表上绘制任意线条。此外，“标题”标签存在，但位于图表之外。

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

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

提前致谢！

Answer 1

找到了一个解决方案，由 jqplot 作者 Chris Leonello 在 2010 年发布到谷歌群组：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>

Answer 3

您可以使用 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,
}