HTML垂直条形图

分享于 

8分钟阅读

Web开发

  繁體

介绍

最近,我遇到了在我们的网页应用中显示彩色条形图的。 在使用 ASP.NET,很多精彩想法,比如使用 MS web web组件,使用第三方控件生成图表,使用第三方控件来生成图表,并使用一些DHTML和JavaScript来实现相同的功能。 看起来,这似乎是一个令人惊讶的想法,但是使用基础知识来实现大需求绝对不错。 让我保持简短和简单,看看这是如何实现的。

inside 查看脚本

在这里,我们将看看单个和双垂直条图,它看起来有点像这样:

单垂直条形图

让我用一个非常简单的方式来解释这个彩色图表是如何生成的。 这个条形图是使用一个 HTML table 和 <DIV>。 它基本上是一组 <DIV> 巧妙放置的inside,它是 HTML table <TR><TD>。 这里图表 table 只需要两行: 一个包含表示值的<DIV>,另一个用于显示x 轴标签。 让我们一步步地把这个图表 cook。

  • 带一个 HTML table。
  • 确定通过确定要在图表中具有的项数来确定 table 中需要多少列。 假设你得到了 colNum 作为你需要的列数。 在附加的示例中,它是 24.
  • 在 table 中占两行。
  • 在第一行中,添加具有适当宽度和高度的<TD> s Having <DIV> s的colNum 数。
  • 在第二行,添加 <TD>的Having <DIV>colNum 数,以表示x 轴的标签。

这将生成图表的骨架。 现在要表示图表上的值,我们需要将第一行的每一个值放在第一行( 步骤 4 )的每一个位置,适当的高度和宽度都。 说 tdwd 是每个栏的宽度,h 是这个栏所需要的高度。 那就是:

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

我们每个人都可以有自己的逻辑来确定 tdwdh。 例如如果图表有固定的区域,那么我们可以通过将图表宽度除以我们想要的列数来确定 tdwd。 这里使用的是:

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

查看附加的代码以完全了解它。

双竖条图表

现在,了解如何生成双条形图是不太难的。 在步骤 4的相同 <TD> 中,我们需要放置两个 <DIV>,而不是添加一个 <DIV>。 第二个 <DIV>的高度应该由第二个信息的array 来引导。 就是这样。在 <TD> 中添加一个表,实际上可以在中添加另一个表,每个列都有一个 <DIV>,表示值的值。 让我们看看HTML代码的外观:

<TD> 
 <tablecellpadding=0 cellspacing=0 border=0 width=" + (tdwd*2/3) +"><tr><tdalign=center valign=bottom width=50%><fontface=arial size='-2'> + VerY[i] + 
 </font> 
 <divstyle='background-color:blue; height:" + h + 
"px; writing-mode:tb-rl;'></div> 
 </td><tdalign=center valign=bottom width=50%><fontface=arial size='-2'> + VerY2[i] + </font><divstyle='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> 将栏 上面的值写入栏。

打印图表

有一个 IE 设置,确定是否允许打印 <DIV> s 和 background 图像的background 颜色。 默认情况下,IE 设置不允许打印 background 颜色。 在 IE 6中更改这里设置,转到 IE -> 选择"互联网选项。"-> 选择"高级"选项卡。 现在向下滚动到"打印"部分,并检查"打印 background 颜色和图像。"的复选框,我们必须对 IE 7和它的他好浏览器有效。

IE 存储并从注册表中获取这里信息。 因此,如果要启用脚本的background 颜色和图像打印,请在目标网页的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 "HKCUSoftwareMicrosoft" + 
"Internet ExplorerMainPrint_Background","yes" Set WSHShell = Nothing
</script>

优点

使用基本HTML开发的图表可以非常有效地使用 clubbing web开发工具和技术,例如在图形方式中显示值的字符串,ASP.NET,JSP,等等。 这也适用于 Netscape,因此范围进一步增加。

版本记录

版本 1.1

在演示中的固定问题:当用户选择"在同一窗口中显示图表时,图表未显示在视图中"

1.2 版

功能包括:现在可以显示y 轴缩放,由用户设置引导。 目前,在演示中进行了以下设置,这将显示y 轴比例,如图 上面 中的3rd 图所示:

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

1.3 版

添加了演示:添加了示例演示,演示如何在 ASP.NET 中轻松生成HTML垂直条形图,DataTable是数据源。 完整的解决方案可以在这里下载 版本 1.3的关键说明: 演示中使用 ASP.NET 版本 1.1,可以与 ASP.NET 2.0类似使用。

x 轴标签文本现在以垂直方式显示,以避免当x 轴标签文本过长时对齐的问题。 对于 IE 6,Windows XP平台上的2,以及配置正确配置的Netscape 8.04,这工作正常。 要在 Netscape 8.04中工作,请通过转到菜单-> Tools-> Options-> 站点控件-> 站点列表选项卡将渲染引擎设置为 IE。 写入模式属性目前仅受 IE 支持。 当这里设置完成时,当网关不支持任何属性时,它转到 IE 呈现引擎并检查它是否支持 IE。 如果 IE 支持,Netscape使用它的特性,并按照 IE 渲染引擎呈现它。

用户使用时,HTML演示包含带有x 轴水平文本的脚本。 ASP.NET 演示包含带有x 轴垂直文本的脚本。

版本 1.4

基本演示中包括对x 轴和y 轴标签的支持。 此外,为了更好地理解它,从 24到 12的列数也限制了。

结束语

带有涂层的html/dhtml基本构造块巧妙使用时会产生奇迹。 用户体验最好通过用户界面来引导。 这只是我要进行的HTML图表之一;还有更多。 如果有兴趣,点击这里查看我所有已经发表的文章。

历史记录

  • 5 2006年10月 --原始版本已经发布
  • 2 2007年01月 --项目已经移动
  • 19 2007年03月 --更新
  • 3 2007年07月 --更新

CHAR  chart  Vertica  条形图  
相关文章