•  11-07-2019
  •  | 
  •  

문제

나는 레코딩이 오래된 사이트를 포함하는 차트는 이와 유사한:

체 텍스트 http://dl.getdropbox.com/u/240752/rental-chart.gif

어떻게 이 차트는 표현으로 순수한 HTML?나는 혐오만으로 그것을 포함하는 이미지입니다.

나는 생각하고 테이블,바로 교체하는 이미지 또는 아마와 겹쳐 절대 위치 테이블의 행,그러나 내가 생각될 수 있는 조금 약하다.

어떤 제안을 환영합니다.

도움이 되었습니까?

해결책

무엇이 잘못된 이미지?

대부분의 시간을 당신이 볼 때 차트 정보는 웹상에서 그것의 생성됩니다.jpg 또는.png.

모든 사람의 디자이너들이 뭔가 잘못입니까?

어떤 그럼에도 불구하고 차트 테이블을 사용하고 배상하지 않 intelligable 해 시력 장애가 있는 사람,그리고,모든 가능성에 올바르게 렌더링되지 않습 브라우저에서는 이미지를 처리할 수 없습니다.

이미지를 사용하고 있는"alt"텍스트와 함께 실시어 설명에"차트 보여주는 ACME 제품에는$49 에 비해 경쟁:임대 회사 4 에서$51.......

다른 팁

<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에서 계층 적 연관성을 얻기가 더 어려웠을 것입니다.

이 마크 업의 이점은 스타일 데이터없이 렌더링 할 때 원래 의미의 대부분을 유지하는 것입니다. 

2 주 동안의 가격
 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> 그래프에 제시된 데이터는 실제로입니다 옳은. 나는 "테이블리스"디자인에 대한 모든 이야기가 있기 때문에 많은 사람들이 테이블을 두려워한다는 것을 알고 있습니다. 그러나 테이블 데이터에 테이블을 사용하는 것이 테이블이 의도 한 것입니다.

표에 표시되는 데이터가 표시된 차트 이미지 아래 (또는 위, 등) 아래 표를 넣었을 것입니다. 차트는 차이를 시각화하는 데 좋으며 실제 값을 보는 데 좋지 않습니다. 따라서 테이블도 그래픽에 대한 멋진 보충제입니다.

차트가 매우 복잡하지 않은 경우 (이 샘플과 같이) 차트에 대한 일반 영어 설명이있는 Alt-Text를 다음과 같은 것입니다.

<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-charts-from-acessible-tables-tables-sing-the-google-charts-api/

그러나 제공 한 이미지와 같은 차트의 경우 마케팅 이미지이고 값이 실제 의미가없는 곳에서는 좋은 텍스트 설명이 적합해야합니다.

사과 대 오렌지 사이트의 막대 그래프에 대한 CSS에 대한 훌륭한 기사를 참조하십시오.

(편집 : 그것은 다음과 같은 링크입니다. @SAM Murray-Sutton 위 - 죄송합니다)

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top