Question

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

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

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

更改主标签的jqplot CSS，将其移动到图表中。
jqplot中的新标签。
问题范围实际上是在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,
}

如何将文本添加为jqplot canvasOverlay？

3 个答案:

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

3 个答案:

如何将文本添加为jqplot canvasOverlay？