3

我正在重新编码一个旧网站，其中包含类似于以下的图表：

替代文字 http://dl.getdropbox.com/u/240752/rental-chart.gif

这个图表将如何用纯 HTML 表示？我讨厌将其作为图像包含在内。

我在想一张桌子，只是用图像代替，或者可能覆盖了绝对定位的表格行，但我认为这可能有点脆弱。

欢迎任何建议。

4

6 回答 6

9

图片有什么问题？

大多数情况下，当您在 Web 上看到图表信息时，它会生成 .jpg 或 .png。

所有这些设计师都做错了吗？

任何使用表格和背景颜色绘制图表的尝试对于视力受损的人来说都是无法理解的，并且很可能在无法处理图像的浏览器上无法正确呈现。

使用图片并使用带有真实英文描述的“替代”文本“显示 ACME 产品的图表与竞争对手相比仅花费 49 美元：租赁公司 4 的价格为 51 美元......

于 2008-11-25T09:53:16.750 回答
3 
<div class="chart">
 <h3>Price for two weeks</h3>
 <div class="companies">
  <div class="company_scale"></div>
  <div class="company1">
   <span class="name">Company 1</span><span class="cost"> $78</span>
  </div>
  <div class="company2">
   <span class="name">Company 2</span><span class="cost"> $74</span>
  </div>
  <div class="company3">
    <span class="name">Company 3</span><span class="cost"> $60</span>
  </div>
  <div class="company4">
    <span class="name">Company 4</span><span class="cost"> $55</span>
  </div>
  <div class="acme">
    <span class="name">Acme Product</span><span class="cost"> $49.95</span>
  </div>
 </div>
</div>

或类似的东西。您将使用 CSS 指定宽度，并使用 css 隐藏“成本”分类跨度。

我很想使用定义列表，但这会更难在 CSS 中获得层次关联。

此标记的好处是在没有任何样式数据的情况下呈现时，它是否保留了其大部分原始含义：

两周价格
公司 1 $78
 公司 2 $74
 公司 3 $60
 公司 4 $55
 极致产品 $49.95

表型号：

我想我至少会尝试使用表格的 Liams 建议，它实际上效果很好，只需添加背景渐变就可以了。

滚动到底部以查看它的运行情况（将很快过期）http://www.webdevout.net/test?03

原创内容如下

<div class="chart">
 <h3>Price for two weeks</h3>
 <table class="companies">
  <thead>
  <tr class="titles">
    <td>Company</td><td>Price</td>
  </tr>
  </thead>
  <tbody>
    <tr class="company1">
      <td class="name">Company 1</td>
      <td class="cost">$78</td>
    </tr>
    <tr class="company2">
      <td class="name">Company 2</td>
      <td class="cost">$74</td>
    </tr>
    <tr class="company3">
      <td class="name">Company 3</td>
      <td class="cost">$60</td>
    </tr>
    <tr class="company4">
      <td class="name">Company 4</td>
      <td class="cost">$55</td>
    </tr>
   <tr class="acme">
      <td class="name">Acme Product</td>
      <td class="cost">$49.95</td>
    </tr>
  </tbody>
  </table>
</div>

div.chart 
{ 
  border: 1px solid #DDD;
}
div.chart table, 
div.chart tbody, 
div.chart thead,
div.chart tr 
{ 
  display: block; 
}
div.chart td 
{ 
  display: inline-block;
  overflow-x: hidden;
}
div.chart {
  padding: 10px;
}
div.chart td.cost, div.chart thead td { 
  display: none;
}

div.chart tbody tr td { 
  background-color: #999;
  padding: 4px;
  margin-top: 16px;
  text-align: right;
}

div.chart  tr.company1 td { 
  width:260px;
}
div.chart tr.company2 td { 
  width:246px;
}
div.chart tr.company3 td { 
  width:200px;
}
div.chart tr.company4 td { 
  width:183px;
}

div.chart tbody tr td.cost { 
  display: inline-block;
  background-color: inherit;
  color: #F00;
  font-size: 80%;
  width: 80px;
}
div.chart  tr.acme td { 
  background-color: #99F;
  width: 166px;
}
div.chart tbody  tr.acme td.cost {
  color: #000;
  background-color: #FF9;
}

于 2008-11-25T10:03:56.900 回答
2

好吧，图表是一个图形元素，我假设您希望纯文本浏览器和搜索引擎都可以访问数据（？）：在这种情况下，使用<table>图表中呈现的数据实际上是正确的。我知道很多人都害怕桌子，因为大家都在谈论“无桌子”设计。但是将表格用于表格数据是这些表格的用途。

我会在图表图像下方（或上方，除此之外等）放置一个表格，其中包含表格显示的数据。图表有利于可视化差异，但不太适合查看实际值；因此，表格也是图形的一个很好的补充。

如果图表不是很复杂（如本示例），您也可以添加一个带有图表简单英文描述的替代文本，如下所示：

<img alt="The price for two weeks is 80 dollars at rental company 1, 
73 dollars at ... The best service and price of 48 dollars 
you get at acme product, plus you can keep it for life" />

文本阅读器以有意义的方式阅读此内容应该没有问题。

于 2008-11-25T10:21:17.617 回答
1

我似乎记得关于这个主题的一些有用的帖子。您可能会发现最终从成本效益的角度来看，简单的图像是最好的，但本文将告诉您有关使用 html 和 css 绘制条形图的所有信息。

巧合的是，在发布此内容后，我昨天查看了everyblock.com，并注意到他们在 html/css 中有一个特别好的图形实现，值得一看。

于 2008-11-25T14:22:46.660 回答
0

您也可以考虑在 HTML 中只包含一个表格，然后使用 Javascript 生成表格：http ://www.wait-till-i.com/2008/01/08/generating-charts-from-accessible-data-表格使用-the-google-charts-api/

但是对于像您提供的图像这样的图表——它只是一个营销图像并且值没有真正的意义——那么只有一个好的替代文本描述就可以了。

于 2008-11-25T15:25:35.940 回答
0

请参阅 Apples to Oranges 网站上有关条形图的 CSS 的精彩文章。

（编辑：与上面@Sam Murray-Sutton发布的链接相同- 抱歉）

于 2008-11-25T17:19:27.507 回答