0

用小矩形绘制非常简单的表格作为简单条形图的图标：

http://jsfiddle.net/AbTX9/1/

希望允许用户将表格复制到剪贴板（例如，复制到文档、电子表格），其中包含数字和矩形（如果可能的话）。

我喜欢自然的 select-copy-paste 如何很好地处理表格中的数字，将它们智能地以 HTML 格式复制到 Excel、PPT、Word 等，并将 Notepad/TextEdit 作为纯文本复制。

但是是否也有一种方法可以复制条形图？我在脑海中想象它粘贴为一个看起来像这样的 HTML 表格，或者粘贴到相应单元格中具有形状的 Excel 中。我尝试了三种方法：

  • 分区：<div style="width: 100px; height: 10px; background-color:#AAA;"></div>
  • 图片：<img src="http://www.moneteam.com/images/BlueRectangle.jpg" height="12px" width="100px"/>
  • SVG：<rect x=80 y=10 width=100 height=12 fill="#A44"/>

使用 Div 和 Img，数字可以很好地复制为表格，但不是条形图。再次使用 SVG 只是数字副本，但只是作为一行数字。

主要是寻找一种可能可行的方法的提示，而不是指望有人为我编程。如果不可能做到这一点，那也很高兴知道。

与我能找到的大多数线程不同，ctrl+C/cmd+C 很好，它不需要以编程方式放置在剪贴板上。如果它不能在每个最后的浏览器上运行，那也可以。

4

1 回答 1

2

你可以试试这个......

    <h1>Table with bars</h1>
<table style="width:250px; background-color: #EEE;">
<tr><td width="49">apples</td>
    <td colspan="4" bgcolor="#FF0000"></td>
    <td width="21"></td>
    <td width="41">100</td>
    </tr>
<tr><td>bananas</td>
    <td colspan="3" bgcolor="#FF0000"></td>
    <td width="31"></td>
    <td></td>
    <td>60</td></tr>
<tr><td>cherries</td>
    <td width="27" bgcolor="#FF0000">&nbsp;</td>
    <td width="24">&nbsp;</td>
    <td width="25">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>36</td>
  </tr>
<tr><td>dates</td>
    <td colspan="3" bgcolor="#FF0000">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>20</td>
  </tr>
</table>

你可以尝试应用一些 css 属性让它变得漂亮:)

于 2012-09-11T13:53:21.833 回答