charts.html 2.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>图表demo</title>
  5. <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  6. <script type="text/javascript" charset="utf-8" src="../ueditor.config.js"></script>
  7. <script type="text/javascript" charset="utf-8" src="editor_api.js"></script>
  8. <!--建议手动加在语言,避免在ie下有时因为加载语言失败导致编辑器加载失败-->
  9. <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文-->
  10. <script type="text/javascript" charset="utf-8" src="../lang/zh-cn/zh-cn.js"></script>
  11. <style type="text/css">
  12. .clear {
  13. clear: both;
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <div>
  19. <script id="editor" type="text/plain" style="width:1024px;height:500px;">
  20. <h1>测试图表请点击表格, 然后点击工具栏上的“图表”按钮</h1>
  21. <table data-chart="title:2012北京房价趋势图;subTitle:;xTitle:月份;yTitle:金额(元);suffix:元;tip:;dataFormat:1;chartType:0">
  22. <tbody>
  23. <tr>
  24. <th width="90"><br></th>
  25. <th width="90">1月</th>
  26. <th width="90">2月</th>
  27. <th width="90">3月</th>
  28. <th width="90">4月</th>
  29. <th width="90">5月</th>
  30. <th width="90">6月</th>
  31. <th width="90">7月</th>
  32. <th width="90">8月</th>
  33. <th width="90">9月</th>
  34. <th width="91">10月</th>
  35. <th>11月</th>
  36. <th>12月</th>
  37. </tr>
  38. <tr>
  39. <th valign="null" width="90">2012</th>
  40. <td valign="top" width="55">24593</td>
  41. <td valign="top" width="55">24308</td>
  42. <td valign="top" width="55">24932</td>
  43. <td valign="top" width="55">25413</td>
  44. <td valign="top" width="55">25588</td>
  45. <td valign="top" width="55">25948</td>
  46. <td valign="top" width="55">26579</td>
  47. <td valign="top" width="55">27199</td>
  48. <td valign="top" width="55">28392</td>
  49. <td valign="top" width="55">29071</td>
  50. <td valign="top" width="55">29522</td>
  51. <td valign="top" width="55">30158</td>
  52. </tr>
  53. </tbody>
  54. </table>
  55. </script>
  56. </div>
  57. <script type="text/javascript">
  58. //实例化编辑器
  59. var ue = UE.getEditor('editor', {
  60. toolbars: [
  61. [
  62. 'charts', 'preview'
  63. ]
  64. ]
  65. });
  66. </script>
  67. </body>
  68. </html>