Last active
August 30, 2018 07:16
-
-
Save codefactory/4427296 to your computer and use it in GitHub Desktop.
amCharts (http://www.amcharts.com/) 로 만든 평균 기온, 평균 강수량 차트입니다. [데모보기] http://codefactory.kr/demos/charts/tempandrain.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>각 지역 평균 기온과 평균 강수량</title> | |
<link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/nanumgothic.css"> | |
<style> | |
* { | |
font-family: 'Nanum Gothic'; | |
} | |
.chart { | |
margin: 70px auto; | |
width: 90%; | |
height: 500px; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="temperature-chart" class="chart"></div> | |
<div id="rainfall-chart" class="chart"></div> | |
<script src="js/jquery-1.8.3.min.js"></script> <!-- jQuery --> | |
<script src="js/amcharts/amcharts.js"></script> <!-- amCharts --> | |
<script> | |
// [1] 각 지역 평균 기온 | |
// 이 데모의 원본 샘플은 http://www.amcharts.com/javascript-charts/smoothed-line/ 입니다. | |
(function () { | |
var chart; | |
var graph; | |
// 실제 차트를 그리는 부분 | |
$(function () { | |
// 먼저 차트를 만듭니다. | |
createChart(); | |
// ajax로 데이터를 받아와서 차트에 데이터를 업데이트 합니다. | |
$.getJSON('data/temperature.json', function (data) { | |
chart.dataProvider = data; | |
chart.validateData(); | |
}); | |
}); | |
// this method is called when chart is first inited as we listen for "dataUpdated" event | |
function zoomChart() { | |
// different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues | |
chart.zoomToDates(new Date(2010, 11), new Date(2012, 0)); | |
} | |
function createChart() { | |
// SERIAL CHART | |
chart = new AmCharts.AmSerialChart(); | |
chart.addTitle("각 지역 평균 기온", 24); | |
chart.pathToImages = "js/amcharts/images/"; | |
chart.autoMargins = false; | |
chart.marginLeft = 0; | |
chart.marginRight = 0; | |
chart.marginBottom = 25; | |
chart.marginTop = 20; | |
chart.zoomOutText = '전체기간 보기'; | |
chart.categoryField = "month"; | |
chart.zoomOutButton = { | |
backgroundColor: '#000000', | |
backgroundAlpha: 0.15 | |
}; | |
// listen for "dataUpdated" event (fired when chart is inited) and call zoomChart method when it happens | |
chart.addListener("dataUpdated", zoomChart); | |
// AXES | |
// category | |
var categoryAxis = chart.categoryAxis; | |
categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true | |
categoryAxis.minPeriod = "MM"; // our data is yearly, so we set minPeriod to YYYY | |
categoryAxis.dateFormats = [{period:'MM',format:'M월'},{period:'YYYY',format:'YYYY년'}]; | |
categoryAxis.gridAlpha = 0; | |
// value | |
var valueAxis = new AmCharts.ValueAxis(); | |
valueAxis.axisAlpha = 0; | |
valueAxis.inside = true; | |
valueAxis.unit = '℃'; | |
chart.addValueAxis(valueAxis); | |
// legend | |
var legend = new AmCharts.AmLegend(); | |
legend.align = 'center'; | |
legend.valueText = '[[value]]℃'; | |
chart.addLegend(legend); | |
// CURSOR | |
var chartCursor = new AmCharts.ChartCursor(); | |
chartCursor.cursorPosition = "mouse"; | |
chartCursor.categoryBalloonDateFormat = "YYYY.MM"; | |
chartCursor.pan = true; | |
chart.addChartCursor(chartCursor); | |
// GRAPH - 서울 | |
graph = new AmCharts.AmGraph(); | |
graph.type = "smoothedLine"; // this line makes the graph smoothed line. | |
graph.title = '서울'; | |
graph.lineColor = "#d1655d"; | |
graph.negativeLineColor = "#d1655d"; // this line makes the graph to change color when it drops below 0 | |
graph.bullet = "round"; | |
graph.bulletSize = 5; | |
graph.lineThickness = 2; | |
graph.valueField = "seoul"; | |
graph.balloonText = "서울: [[value]]℃"; | |
chart.addGraph(graph); | |
// GRAPH - 부산 | |
graph = new AmCharts.AmGraph(); | |
graph.type = "smoothedLine"; // this line makes the graph smoothed line. | |
graph.title = '부산'; | |
graph.lineColor = "#637bb6"; | |
graph.negativeLineColor = "#637bb6"; // this line makes the graph to change color when it drops below 0 | |
graph.bullet = "round"; | |
graph.bulletSize = 5; | |
graph.lineThickness = 2; | |
graph.valueField = "busan"; | |
graph.balloonText = "부산: [[value]]℃"; | |
chart.addGraph(graph); | |
// GRAPH - 광주 | |
graph = new AmCharts.AmGraph(); | |
graph.type = "smoothedLine"; // this line makes the graph smoothed line. | |
graph.title = '광주'; | |
graph.lineColor = "#d1cf2a"; | |
graph.negativeLineColor = "#d1cf2a"; // this line makes the graph to change color when it drops below 0 | |
graph.bullet = "round"; | |
graph.bulletSize = 5; | |
graph.lineThickness = 2; | |
graph.valueField = "gwangju"; | |
graph.balloonText = "광주: [[value]]℃"; | |
chart.addGraph(graph); | |
// SCROLLBAR | |
var chartScrollbar = new AmCharts.ChartScrollbar(); | |
chartScrollbar.graph = graph; | |
chartScrollbar.backgroundColor = "#DDDDDD"; | |
chartScrollbar.scrollbarHeight = 30; | |
chartScrollbar.selectedBackgroundColor = "#FFFFFF"; | |
chart.addChartScrollbar(chartScrollbar); | |
// WRITE | |
chart.write("temperature-chart"); | |
} | |
})(); | |
// [2] 각 지역 평균 강수량 | |
// 이 데모의 원본 샘플은 http://www.amcharts.com/javascript-charts/3d-stacked-column/ 입니다. | |
(function () { | |
var chart; | |
var graph; | |
// 실제 차트를 그리는 부분 | |
$(function () { | |
// 먼저 차트를 만듭니다. | |
createChart(); | |
// ajax로 데이터를 받아와서 차트에 데이터를 업데이트 합니다. | |
$.getJSON('data/rainfall.json', function (data) { | |
chart.dataProvider = data; | |
chart.validateData(); | |
}); | |
}); | |
// this method is called when chart is first inited as we listen for "dataUpdated" event | |
function zoomChart() { | |
// different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues | |
chart.zoomToDates(new Date(2010, 11), new Date(2012, 0)); | |
} | |
function createChart() { | |
// SERIAL CHART | |
chart = new AmCharts.AmSerialChart(); | |
chart.addTitle("각 지역 평균 강수량", 24); | |
chart.pathToImages = "js/amcharts/images/"; | |
chart.autoMargins = false; | |
chart.marginLeft = 0; | |
chart.marginRight = 0; | |
chart.marginBottom = 25; | |
chart.marginTop = 20; | |
chart.zoomOutText = '전체기간 보기'; | |
chart.categoryField = "month"; | |
chart.zoomOutButton = { | |
backgroundColor: '#000000', | |
backgroundAlpha: 0.15 | |
}; | |
chart.plotAreaFillAlphas = 0.2; | |
// the following two lines makes chart 3D | |
chart.angle = 30; | |
chart.depth3D = 40; | |
// listen for "dataUpdated" event (fired when chart is inited) and call zoomChart method when it happens | |
chart.addListener("dataUpdated", zoomChart); | |
// AXES | |
// category | |
var categoryAxis = chart.categoryAxis; | |
categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true | |
categoryAxis.minPeriod = "MM"; // our data is yearly, so we set minPeriod to YYYY | |
categoryAxis.dateFormats = [{period:'MM',format:'M월'},{period:'YYYY',format:'YYYY년'}]; | |
categoryAxis.gridAlpha = 0.2; | |
categoryAxis.gridPosition = "start"; | |
categoryAxis.axisColor = "#DADADA"; | |
categoryAxis.axisAlpha = 1; | |
categoryAxis.dashLength = 5; | |
// value | |
var valueAxis = new AmCharts.ValueAxis(); | |
valueAxis.inside = true; | |
valueAxis.unit = 'mm'; | |
valueAxis.stackType = "3d"; // This line makes chart 3D stacked (columns are placed one behind another) | |
valueAxis.gridAlpha = 0.2; | |
valueAxis.axisColor = "#DADADA"; | |
valueAxis.axisAlpha = 1; | |
valueAxis.dashLength = 5; | |
chart.addValueAxis(valueAxis); | |
// legend | |
var legend = new AmCharts.AmLegend(); | |
legend.align = 'center'; | |
legend.valueText = '[[value]]mm'; | |
chart.addLegend(legend); | |
// CURSOR | |
var chartCursor = new AmCharts.ChartCursor(); | |
chartCursor.cursorPosition = "mouse"; | |
chartCursor.categoryBalloonDateFormat = "YYYY.MM"; | |
chartCursor.pan = true; | |
chart.addChartCursor(chartCursor); | |
// GRAPH - 서울 | |
graph = new AmCharts.AmGraph(); | |
graph.type = "column"; // this line makes the graph smoothed line. | |
graph.title = '서울'; | |
graph.lineAlpha = 0; | |
graph.lineColor = "#d1655d"; | |
graph.fillAlphas = 1; | |
graph.valueField = "seoul"; | |
graph.balloonText = "서울: [[value]]mm"; | |
chart.addGraph(graph); | |
// GRAPH - 부산 | |
graph = new AmCharts.AmGraph(); | |
graph.type = "column"; // this line makes the graph smoothed line. | |
graph.title = '부산'; | |
graph.lineAlpha = 0; | |
graph.lineColor = "#637bb6"; | |
graph.fillAlphas = 1; | |
graph.valueField = "busan"; | |
graph.balloonText = "부산: [[value]]mm"; | |
chart.addGraph(graph); | |
// GRAPH - 광주 | |
graph = new AmCharts.AmGraph(); | |
graph.type = "column"; // this line makes the graph smoothed line. | |
graph.title = '광주'; | |
graph.lineAlpha = 0; | |
graph.lineColor = "#d1cf2a"; | |
graph.fillAlphas = 1; | |
graph.valueField = "gwangju"; | |
graph.balloonText = "광주: [[value]]mm"; | |
chart.addGraph(graph); | |
// SCROLLBAR | |
var chartScrollbar = new AmCharts.ChartScrollbar(); | |
chartScrollbar.graph = graph; | |
chartScrollbar.backgroundColor = "#DDDDDD"; | |
chartScrollbar.scrollbarHeight = 30; | |
chartScrollbar.selectedBackgroundColor = "#FFFFFF"; | |
chart.addChartScrollbar(chartScrollbar); | |
// WRITE | |
chart.write("rainfall-chart"); | |
} | |
})(); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment