[그래프 플러그인] chart

 

- 그래프 플러그인 (널리)

http://nuli.navercorp.com/sharing/nwagon#nWagon-chart6

https://naver.github.io/billboard.js/?fbclid=IwAR1T_sMqzOOktLwtj9vBOH17Ke3kiPFiy_b2nCgA9LrLWt7P6wXJh6JbWHM

 

 

- 무료 차트 

 

- ChartJS  [MIT License] (canvas) : https://www.chartjs.org/ 
    sample : https://www.chartjs.org/samples/latest/

    aip(ko) : https://yeon22.github.io/Chartjs-kr/docs/latest/getting-started/usage.html

- TOAST chart [MIT License] (canvas) : https://ui.toast.com/tui-chart

- D3.js (canvas) : https://d3js.org/

    e북(PDF) / e북2(html) / (html)

- C3.js [MIT License] (canvas) D3.js 사용성있게  : https://c3js.org/

- Chartist-js [MIT](svg) : https://gionkunz.github.io/chartist-js/

- 구글 그래프 (svg)

https://developers.google.com/chart/interactive/docs/gallery/annotationchart

option : http://ktsmemo.cafe24.com/s/GoogleChart/85

edit : http://getcrud.com/googleChart/pieChart.html

- morrisjs (svg) : https://morrisjs.github.io/morris.js/

 

- JUI [MIT License] (svg)

http://jui.io/

- raraph [무료] (svg,canvas) 
https://www.rgraph.net/

- morris.js [BSD License] (svg)
https://morrisjs.github.io/morris.js/index

- jqBarGraph (div) jQuery plugin old

http://www.workshop.rs/jqbargraph/

 

 

- 차트  list link

	이름	사이트	라이센스	특징
1	Highcharts JS	http://www.highcharts.com/	비상용전제 하에 Free (링크)	다양,고품질,다양한레퍼런스, 상용 [SVG]
2	Flotr	http://www.flotcharts.org/	MIT License (링크)	[canvas]
3	Flotr2	http://humblesoftware.com/flotr2/	MIT License (링크)	[canvas]
4	gRaphaël	http://g.raphaeljs.com/	MIT License (링크)	[ SVG]
5	Protovis	http://mbostock.github.io/protovis/	BSD License	d3기반, 업데이트멈춤 [SVG]
6	jqPlot	http://www.jqplot.com/	dual licensed (MIT & GPLv2)	[canvas]
7	Chart.js	http://www.chartjs.org/	MIT license (링크 하단)	HTML5 기반 [canvas]
8	amCharts	http://www.amcharts.com/javascript-charts/	link표시로 무료로 가능 (상용)	이미지/PDF export (유료) [canvas]
9	JFreeChart	http://www.jfree.org/jfreechart/	LGPL (링크 중앙)	[SVG]

 

 

- 그래프 플러그인 (유료)

http://www.zingchart.com/features/

 

- 하이차트 (유료)

https://www.highcharts.com/

 

D3.js - Data-Driven Documents

 

 

사용법 · Chart.js 문서

Chart.js | Samples

 

Chart.js | Samples

 

morris.js

C3.js | D3-based reusable chart library

 

 

구글 차트

<div id="donutchart3" class="donutchart3" style="position: relative; width: 450px; height: 350px;" ></div>

<script type="text/javascript">

google.charts.load("current", {packages:["corechart"]});

google.charts.setOnLoadCallback(drawChart3);

function drawChart3() {

var data3 = google.visualization.arrayToDataTable([

['name', 'value'],

['데이처 추출 요청', 61],

['IT지원요청', 35],

['인프라 변경요청', 33],

['운영개선 개발 요청', 22],

['신규 개발 요청', 2],

]);

 

var chart3 = new google.visualization.PieChart(document.getElementById('donutchart3'));

google.visualization.events.addListener(chart3, 'ready', donutchartReadHandler1);

chart3.draw(data3, options_doughnut3);

function donutchartReadHandler1(e) {

var cli = chart3.getChartLayoutInterface();

var total = data3.getDistinctValues(1).length;

$(".js-sor_table_data .cols0 .num").text(chart3.ia.F[0].iE);

$(".js-sor_table_data .cols1 .num").text(chart3.ia.F[1].iE);

$(".js-sor_table_data .cols2 .num").text(chart3.ia.F[2].iE);

$(".js-sor_table_data .cols3 .num").text(chart3.ia.F[3].iE);

$(".js-sor_table_data .cols4 .num").text(chart3.ia.F[4].iE);

}

}

</script>