동적으로 차트 및 보고서를 html5로 가져 오는 방법은 무엇입니까?

나는 phonegap을 사용하는 안드로이드 타블렛 응용 프로그램에서 일하고 있습니다.이 그림에서는 아래 그림과 같이 서로 다른 상태를 도식적으로 설명하는 보고서 차트가 필요합니다.동적으로 차트 및 보고서를 html5로 가져 오는 방법은 무엇입니까?

enter image description here

나는 데이터로 변화 동적 차트 또는 보고서의 이러한 종류를 생성 할 는 changes.Can 사람이 나에게 몇 가지 유사한 기능을 가지고, JS HTML5와 CSS를 사용하여 몇 가지 예제를 제공하는 데 도움이?

출처

2012-06-25 android phonegap

체크 아웃 했습니까? RGraph : HTML5 & 자바 스크립트 차트?

RGraph은 HTML5를 사용하여 20 가지가 넘는 차트 유형을 지원하는 Javascript로 작성된 차트 라이브러리입니다. RGraph는 새로운 HTML5 캔버스 태그를 사용하여 Javascript를 사용하여 웹 브라우저 내에 이러한 차트를 만듭니다. 즉, 더 빠른 페이지와 적은 웹 서버로드를 의미합니다. 이로 인해 페이지 크기가 작아지고 비용이 절감되며 웹 사이트가 더 빨라집니다.

당신이 기본 코드를 볼 경우 ,이 길을 간다 :

<script> 
    window.onload = function() 
    { 
     // The data to be shown on the Pie chart 
     var data = [564,155,499,611,322]; 

     // Create the Pie chart. The arguments are the canvas ID and the data to be shown. 
     var pie = new RGraph.Pie('myPie', data); 

     // Configure the chart to look as you want. 
     pie.Set('chart.labels', ['Abc', 'Def', 'Ghi', 'Jkl', 'Mno']); 
     pie.Set('chart.linewidth', 5); 
     pie.Set('chart.stroke', 'white'); 

     // Call the .Draw() chart to draw the Pie chart. 
     pie.Draw(); 
    } 
</script>

이 Pie charts의 라이브 예제를 참조하십시오!

당신은 레이다 차트입니다. 여기에서 하나를보십시오 : Radar Charts. 소스 코드 :

<script> 
    window.onload = function() 
    { 
     // The data to be represented on the Radar chart. 
     var data = [3, 3, 41, 37, 16]; 

     // Create the Radar chart. The arguments are the canvas ID and the data to be shown on the chart. 
     var radar = new RGraph.Radar('myRadar', data); 

     // If you want to show multiple data sets, then you give them like this: 
     // var radar = new RGraph.Radar('myRadar', [3,5,6,8], [4,5,2,6]); 

     // Configure the Radar chart to look as you wish. 
     radar.Set('chart.background.circles', true); 
     radar.Set('chart.color', 'rgba(255,0,0,0.5)'); 
     radar.Set('chart.circle', 20); 
     radar.Set('chart.circle.fill', 'rgba(200,255,200,0.5)'); 
     radar.Set('chart.labels', ['Safari (3%)', 'Other (3%)', 'MSIE 7 (41%)', 'MSIE 6 (37%)', 'Firefox (16%)']); 
     radar.Set('chart.key', ['Market share', 'A made up figure']); 

     // Now call the .Draw() method to draw the chart. 
     radar.Draw(); 
    } 
</script>

출처

2012-06-25 13:52:29

안녕하세요 덕분에이 있으면 알려주세요 정확히 내가 원했지만 해당 js 코드를 구현할 수 없다면이 경우에 도움이 될 수 있습니까? 고마워요. –

@androidfresher 좋아, 이것을 구현하려고 할 때 직면 한 문제는 무엇인가? 지금까지 뭐 했니? –

js 파일과 flotr2.min.js를 워드 프로세서에 추가했지만 표시 할 함수를 호출하는 위치를 이해할 수는 없습니다. github의 소스 코드를 사용하면 도움이 될 수 있습니까? –

가능한 해결책은 그래프 CSS3 transitions를 매핑하는 것이다. Here은 자바 스크립트를 사용하지 않고 무엇을 할 수 있는지 보여주는 기본 예입니다.

Here은 css (javascript가 아님)로 제작 된 몇 가지 정적 예제이며, 이전 예제 중 하나에서 보여 주듯이 어려운 경우가 있습니다.

출처

2012-06-25 14:24:04 rudolph9

아래 링크를 확인하십시오. 실제로 좋은 예가 있습니다.

http://www.highcharts.com/

여전히 문제 난이 링크 http://www.humblesoftware.com/flotr2/#!basic-radar를 가지고 응답을

출처

2012-08-07 11:15:35

동적으로 차트 및 보고서를 html5로 가져 오는 방법은 무엇입니까?

답변

관련 문제