HTML 垂直条形图

• 下载演示项目 - 3.7 Kb
• 下载使用 ASP.NET 1.1 生成的 HTML 垂直柱状图演示项目 - 20.4 Kb

引言

最近，我遇到了一个在我们的 Web 应用程序中显示彩色柱状图的需求。由于我使用的是 ASP.NET 1.1，我想到了一些很棒的想法，例如使用 MS Office Web Office 组件、使用第三方控件生成图表、寻找使用 System.Drawing 功能来显示图表的绝佳方法等等。其中一个让我印象深刻的方法是仅使用纯 HTML、少量 DHTML 和 JavaScript 来实现相同的功能。乍一看，这可能是一个可怕的想法，但以基础知识实现大型需求绝不是坏事。我将尽量简短而简单，看看如何实现这一点。

脚本内部概览

在这里，我们将介绍单柱和双柱垂直图表，它们看起来有点像这样

单柱垂直图表

我将非常简单地解释这个彩色图表是如何生成的。这个柱状图是使用 HTML 表格和 <DIV>s 生成的。它基本上是一组 <DIV>s，巧妙地放置在 HTML 表格 <TR>s 的 <TD>s 中。这个图表表只需要两行：一行包含表示值的 <DIV>s，另一行显示 X 轴标签。让我们一步一步地制作这个图表。

1. 使用一个 HTML 表格。
2. 通过确定图表上要显示的项数来确定表中需要的列数。假设您需要 colNum 列。在附加的示例中，它是 24。
3. 在该表中放置两行。
4. 在第一行中，添加 colNum 个 <TD>，其中包含具有适当宽度和高度的 <DIV>s。
5. 在第二行中，添加 colNum 个 <TD>，其中包含 X 轴标签的 <DIV>s。

这会生成图表的骨架。现在，为了在图表上表示值，我们需要在第一行（步骤 4）的每个 <TD> 中放置 <DIV>s，并具有适当的高度和宽度。假设 tdwd 是每个柱的宽度，h 是该柱所需的高度。那么它将是

<TD> 
    <div style='background-color:blue; width:" + (tdwd-5) + 
        "; height:" + h + ";' />
</TD>

我们每个人都可以有自己的逻辑来确定 tdwd 和 h。例如，如果我们为图表设置了固定区域，那么我们可以通过将图表宽度除以所需的列数来确定 tdwd。这里使用的是

tdwd = parseInt((chartwidth-(HorX.length*4))/HorX.length);
h = parseInt(VerY[i] / (vmax / 200));

请查看附件代码以完全理解它。

双柱垂直图表

现在，理解如何生成双柱图表并不难。在步骤 4 的同一个 <TD> 中，我们不需要添加一个 <DIV>，而是需要放置两个 <DIV>s。第二个 <DIV> 的高度应由第二个信息数组指导。就是这样。为了更好地格式化内容，您实际上可以在 <TD> 中添加另一个表，其中包含一行两列，每列有一个表示值的 <DIV>。让我们看看 HTML 代码会是什么样子

<TD>     
    <table cellpadding=0 cellspacing=0 border=0 
        width=" + (tdwd*2/3) + ">
        <tr>
            <td align=center valign=bottom width=50%>
                <font face=arial size='-2'> + VerY[i] + 
                </font>                
                <div style='background-color:blue; height:" + h + 
                    "px; writing-mode:tb-rl;'></div>    
             </td>
             <td align=center valign=bottom width=50%>
                 <font face=arial size='-2'> + VerY2[i] + </font>
                 <div style='background-color:green; height:" + h2 + 
                     "px; writing-mode:tb-rl;'></div>
             </td>
         </tr>
     </table>            
</TD>

在这里，h2 = parseInt(VerY2[i] / (vmax / 200)); 可以用来确定第二个 <DIV> 的高度，而 <font face=arial size='-2'> + VerY[i] + </font> 则在柱的上方显示柱的值。

打印图表

有一个 Internet Explorer 设置决定是否允许打印 <DIV>s 的背景颜色和背景图像。默认情况下，IE 设置不允许打印背景颜色。要在 IE 6 中更改此设置，请转到 IE 的“工具”菜单 -> 选择“Internet 选项...” -> 选择“高级”选项卡。现在滚动到“打印”部分，并选中“打印背景颜色和图像”复选框。我们必须为 IE 7 和其他好的浏览器提供相应的选项。

IE 从注册表中存储和提取此信息。因此，如果您想通过脚本启用背景颜色和图像的打印，请在登录页面的 HTML 部分添加以下代码

<script language="vbscript">
    on error resume next
    'Change IE Print Settings to 
    'Print Background Color and Images
    Set WSHShell = CreateObject("WScript.Shell")
    WSHShell.RegWrite "HKCU\Software\Microsoft\" + 
    "Internet Explorer\Main\Print_Background", "yes"
    Set WSHShell = Nothing
</script>

优点

像这样使用基本 HTML 开发的图表，通过与 ASP、ASP.NET、JSP 等 Web 开发工具和技术结合使用，可以非常有效地发挥作用。所有需要的是一个要以图形方式显示的数组值。这也可以在 Netscape 中使用，因此范围会自动进一步扩大。

版本历史

版本 1.1

演示中修复的错误：当用户选择“在同一窗口中显示图表”时，图表未在 Netscape 浏览器中显示。

版本 1.2

包含的功能：Y 轴刻度现在可以显示，由用户设置指导。目前，演示中进行了以下设置，这将显示 Y 轴刻度，如上图所示的第三个图表

var chartHeight = 500;
var chartYAxisInterval = 100; 
var displayYAxisScale = true;

版本 1.3

添加的演示：添加了一个示例演示，展示了如何在 ASP.NET 中非常轻松地生成 HTML 垂直柱状图，其中 DataTable 作为数据源。完整的解决方案可以在这里下载。V1.3 版本要点：演示中使用的是 ASP.NET 版本 1.1，并且可以以类似的方式与 ASP.NET 2.0 一起使用。

X 轴标签的文本现在是垂直显示的，以避免 X 轴标签文本过长时出现对齐问题。这在 Windows XP 平台上的 IE 6 SP 2 以及正确配置选项的 Netscape 8.04 中效果很好。要在 Netscape 8.04 中实现此功能，请通过转到菜单 -> 工具 -> 选项 -> 站点控件 -> 站点列表选项卡将渲染引擎设置为 IE。writing-mode 属性目前仅受 IE 支持。进行此设置后，当 Netscape 遇到它不支持的任何属性时，它将转到 IE 渲染引擎并检查它是否受 IE 支持。如果 IE 支持，Netscape 将使用其功能并根据 IE 渲染引擎进行渲染。

为了方便用户，HTML 演示包含带有水平 X 轴文本的脚本。ASP.NET 演示包含带有垂直 X 轴文本的脚本。

版本 1.4

在基本演示中增加了对按需 X 轴和 Y 轴标签的支持。此外，为了更好地理解，将演示中的列数从 24 限制为 12。

结论

通过巧妙使用 HTML/DHTML 的基本构建块，并加以修饰，可以创造奇迹。用户体验最佳由 UI 指导。这只是我发布的 HTML 图表之一；还有更多即将推出。如果您有兴趣，请在此处查看我发布的所有文章。

历史

• 2006 年 10 月 5 日 -- 发布原始版本
• 2007 年 1 月 2 日 -- 文章已迁移
• 2007 年 3 月 19 日 -- 已更新
• 2007 年 7 月 3 日 -- 已更新