HTML/CSS의 차트와 같은 png 이미지 표시

Question

HTML/CSS/자바 스크립트로 만든 웹 기반 실험에서 자극으로 프레젠테이션을 위해 png 형식으로 저장 한 차트와 테이블을 많이 만들었습니다. 어떻게 표시 될 때 그들을 날카롭게 보이게 할 수 있습니까? 여기

는 실험에 표시 될 때 그들은 지금 어떻게 생겼는지의 예제 : 당신이 볼 수 있듯이

이, 선이 사라지는 심지어 얇은 때때로 들쭉날쭉하고 있으며, 텍스트와 유사한 문제가있다 . 나는 이것이 PNG 이미지의 "자연스런"크기 (약 3500x2500 pix)가 디스플레이 크기 (약 200px)보다 큰 결과라고 생각하지만, 수동으로 크기를 조정하지 않고도 디스플레이 시간에이를 해결할 수있는 방법이 있어야한다고 생각합니다. 이미지들.

다음은 몇 가지 기록입니다.이 모든 것은 Excel에서 만들어진 다음 Powerpoint에 복사 된 다음 이미지로 저장됩니다. 원래 저는 Powerpoint에서 직접 저장했습니다.이 파일은 .jpg 형식으로 기본 설정되어 퍼지기 시작했습니다. 그런 다음 .emf로 저장하려고 시도하고 IrfanView를 사용하여 .png로 다시 저장했습니다. 결과로 나오는 png는 이미지 뷰어를 통해 자연스러운 (큰) 크기로 볼 때 매우 날카 롭습니다. 그러나 html로 훨씬 더 작은 크기로 embed하면 위와 같이 매우 나쁩니다.

Answer 1

1 픽셀 이하의 두께로 화면의 라인이 잘 보이지 않습니다.

이미지에 3 픽셀 두께의 요소가 있다고 가정 해 보겠습니다. 250X250으로 크기를 조정하면 두께가 0.3 픽셀이됩니다. -> 좋지 않습니다.

당신이 선 가장자리와 모서리에서 묘사 한 바람직하지 않은 영향을 만드는 것은 무엇입니까?

문제는 내가 세 가지 잠재적 인 솔루션을 볼 것을 해결하기 위해 :

• 이 Excel 차트, 또는 당신을 가능하게하는 모든 다른 기능의 스크린 샷과 같은 원본 소스에서 낮은 해상도 (과 이미지의 다른 복사본을 만듭니다 저해상도 비트 맵 가져 오기)
• 멋진 기술을 배우기 위해 차트에 수치 데이터가 표시되어있는 경우 차트 라이브러리를 사용할 수 있습니다. 이렇게하면 벡터 드로잉이되기 때문에 더 예쁜 렌더링을 얻을 수 있습니다. 예 : HighCharts
• 마지막과 훨씬 더 솔루션 : 이미지 편집기와 이미지와 해당 기술에 대한 연구는 ... 등 라인, 점, 화살표처럼, 모든 날카로운 요소의 두께의 크기를 증가

Answer 2

여전히 Excel 파일이 있습니까? 가능한 경우 :

1. Excel에서 차트를 pdf 파일로 내 보냅니다.
2. 그런 다음 pdf 파일을 Inkscape와 같은 벡터 프로그램으로 가져 오십시오. 당신은 이미지 태그로 할 것 같은
3. svg로 저장 한 다음 (당신이 직접 추가 할 수 있습니다)

당신이 몇 가지 포인트를 편집 할 수 있도록 그들이 벡터 그래픽이 될 것이다 PDF로 가져올 때 svg 파일을 참조 추가로 필요하다면.