웹 사이트의 막대 그래프

StackOverflow https://stackoverflow.com/questions/1127426

  •  13-09-2019
  •  | 
  •  

문제

나는 결코 웹 디자이너가 아니므로 기꺼이주고 싶은 자세한 도움을 원합니다.

0-100%의 막대 그래프를 사용하여 입력하는 일부 데이터를 추적하는 웹 사이트를 만들고 싶습니다. 그래프가 갈 수있는 최대 숫자를 입력 한 다음 일부 데이터 포인트가 가끔 업데이트되며 완료 막대 그래프가 반영됩니다.

이 작업을 어떻게할까요?

나는 기본 HTML과 PHP를 알고 있지만 오랫동안 사용하지 않았습니다.

도움이 되었습니까?

해결책

나는 대부분의 제안이 과잉이라고 생각합니다. 필요한 모든 것이 간단한 바 그라프 만 있으면 추가 라이브러리 / 의존성을 가질 필요가 없습니다. 일반 HTML/CSS는 ...

추신 : 빠른 코드 샘플, Firefox 3.x에서만 테스트되었습니다.

<style type="text/css">
.bar
{
    background-color: green;
    position: relative;
    height: 16px;
    margin-top: 8px;
    margin-bottom: 8px; 
}
</style>

<div id="barcontainer" style="width:200px;">
    <div id="bar1" class="bar" style="width:43%;"></div>
    <div id="bar2" class="bar" style="width:12%;"></div>
    <div id="bar3" class="bar" style="width:76%;"></div>
    <div id="bar4" class="bar" style="width:100%;"></div>
</div>

JavaScript로 개별 막대의 너비를 쉽게 변경할 수 있습니다 (너비를 변경).

다른 팁

나는 당신이 당신이 새롭다고 말하지만 Google 시각화 API를 살펴 봐야합니다. 당신이 원하는 일을 할 수있는 좋은 일이 있습니다.
http://code.google.com/apis/visualization/

이 문제를 해결할 수있는 두 가지 방법이 있습니다. 백엔드에서 그래프를 생성하거나 (아마도 PHP를 사용하여) JavaScript를 사용하여 클라이언트 쪽에서 수행하십시오.

나는 언어를 실제로 알지 못하기 때문에 PHP에서 그것을 수행한다는 세부 사항을 확신하지 못하지만 PHP의 그래프 생성에 대한 정보가 많이 있다고 확신합니다.

JavaScript 접근법을 위해 두 가지를 모두 사용했습니다 플로트 (jQuery의 경우) 및 flotr (프로토 타입 용) 이전. 나는 그것들을 많이 좋아하며, 막대 차트를 포함한 모든 종류의 차트를 생성하는 방법에 대한 두 라이브러리에 대한 좋은 문서와 예제가 있습니다.

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