使用JavaScript绘制柱状图和折线图

本文将介绍如何使用JavaScript创建柱状图和折线图。这种图表在数据可视化中非常常见,可以帮助用户直观地理解数据。

浏览器兼容性

图表脚本需要在支持JavaScript的浏览器中运行。以下是支持此脚本的浏览器版本:

  • Internet Explorer 5.5及以上版本
  • Netscape 6及以上版本

使用限制

请注意,此脚本有一些限制:

  • 仅处理正值。
  • 每页仅支持一个图表
  • 在Netscape浏览器中,不支持折线图。

使用方法

要使用此图表脚本,需要在HTML文档中包含以下代码:

<script language="JavaScript" src="Graph.js"></script>

接下来,可以使用以下HTML和JavaScript代码来创建图表

<table align="center"> <tr> <td width="5%"></td> <td id="here" align="center"></td> <td valign="top" width="5%"> <a href="">帮助</a> </td> </tr> </table> <script language="JavaScript"> var bg = new Graph(10); bg.parent = document.getElementById('here'); bg.title = '当前前10服务器'; bg.xCaption = '服务器'; bg.yCaption = '每个服务器的连接数per Server'; bg.xValues[0] = [188, '里约热内卢']; bg.xValues[1] = [180, '圣保罗']; bg.xValues[2] = [159, '巴西利亚']; bg.xValues[3] = [67, '贝洛奥里藏特']; bg.xValues[4] = [66, '福塔莱萨']; bg.xValues[5] = [62, '马瑙斯']; bg.xValues[6] = [48, '阿雷格里港']; bg.xValues[7] = [26, '库里提巴']; bg.xValues[8] = [16, '萨尔瓦多']; bg.xValues[9] = [11, '纳塔尔']; bg.showLine = true; bg.showBar = true; bg.orientation = 'horizontal'; // 或 'vertical'; bg.draw(); </script>
沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485