•  11-07-2019
  •  | 
  •  

题

我重新编码包含一个类似的图表旧站点：

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

这将如何图表用纯HTML来表示？我厌恶只包括它作为一个图像。

我想一个表，只需替换为图像，或者具有绝对定位的表行重叠，但我认为这可能是一个有点脆弱。

任何建议欢迎。

有帮助吗？

解决方案

的哪些错误与图像？

大多数时候，你看到Web其生成.jpg或.png在图表上的信息。

让所有那些设计师有什么不对？

任何试图绘制使用表格和化背景颜色不会intelligable到视力受损人员的图表，并且，在所有的可能性不会在不能处理图像的浏览器正确地呈现。

使用该图像，并具有与真实的英语描述的“ALT”文本“A表示ACME产品图表成本只有$ 49与竞争对手相比：在$ 51租赁公司4 .......

其他提示

<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。

此标记的好处，当呈现在没有任何风格数据，是它保留其大部分本义：

Price for two weeks
 Company 1 $78
 Company 2 $74
 Company 3 $60
 Company 4 $55
 Acme Product $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;
}

好了，一个图是一个图形元素，我假设你想要的数据，对双方都是纯文本浏览器和搜索引擎访问（？）：在这种情况下，使用以图表呈现的数据<table>实际上是< EM>正确。我知道有很多人是害怕表，因为所有人都在谈论“表”设计。但是，使用表格表格数据是什么表意的。

我将不得不把一个表低于（或高于，除了等）的图表图像，与数据表中显示。图表是良好的可视化的差异，并没有那么好为看到的实际值;因此一个表以及是一个很好的补充到图形。

如果图表不是很复杂（如本样品）也可以只添加一个alt文本与图表的一个普通的英语描述中，是这样的：

<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" />

一个文本阅读器应该没有问题以有意义的方式读出此。

我似乎记得关于这个问题的一些有用的帖子。你可能会发现，在最后一个简单的图像是从一个成本效益的最佳点，但是的这篇文章会告诉你一切你所能想知道如何使用HTML和CSS来绘制条形图。

巧合的是，这张贴我看着 everyblock.com 昨天发现后，他们有一个特别好的实施在HTML / CSS图表这将是值得考虑的。

您也可以考虑在你的HTML只是一个表＆然后使用JavaScript生成表：的 http://www.wait-till-i.com/2008/01/08/generating-图表-从可访问的数据，表，使用最谷歌-图表-API /

但是，对于像您所提供的图像的图表 - 它只是一个市场形象和值没有实际意义 - 那只是一个良好的文字叙述要细

请参阅上的苹果和橘子网站条形图，CSS的大文章。

（编辑：它张贴由同一链路的 @Sam默里 - 萨顿以上 - 对不起）

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top