\u3069\u3053\u304b\u306e\u30b5\u30a4\u30c8\u3092\u95b2\u89a7\u3057\u3066\u3044\u305f\u969b\u306b\u3001\u6050\u3089\u304f\u306fJavaScript\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u3067\u63cf\u5199\u3055\u308c\u305f\u6298\u308c\u7dda\u30b0\u30e9\u30d5\u3063\u307d\u3044\u304c\u3001\u8868\u793a\u7bc4\u56f2\u3092\u72ed\u3081\u305f\u308a\u5e83\u3052\u305f\u308a\u3068\u3044\u3063\u305f\u3042\u307e\u308a\u898b\u305f\u3053\u3068\u306e\u7121\u3044\u6a5f\u80fd\u306e\u30b0\u30e9\u30d5\u3092\u898b\u304b\u3051\u305f\u3002\u30bd\u30fc\u30b9\u3092\u898b\u3066\u307f\u308b\u3068\u3069\u3046\u3082amCharts\u3068\u3044\u3046JavaScript\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u3089\u3057\u3044\u3002\u4ee5\u4e0b\u306b\u30b5\u30f3\u30d7\u30eb\u3068\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u3092\u30e1\u30e2\u3002<\/p>\n
<\/p>\n
https:\/\/www.amcharts.com\/<\/a><\/p>\n <\/p>\n https:\/\/taitan916.info\/sample\/amcharts\/<\/a><\/p>\n <\/p>\n <\/p>\n \u516c\u5f0f\u30b5\u30a4\u30c8\u3078\u30ea\u30f3\u30af\u3055\u308c\u3066\u3044\u308b\u30ed\u30b4\u3092\u5916\u3055\u306a\u3051\u308c\u3070\u5546\u7528\u30b5\u30a4\u30c8\u3067\u3082\u7121\u511f\u4f7f\u7528\u53ef\u80fd\u3063\u307d\u3044\u3002\u30ed\u30b4\u81ea\u4f53\u306f\u76ee\u7acb\u305f\u306a\u3044\u4e0a\u306b\u304a\u3057\u3083\u308c\u306a\u611f\u3058\u306a\u306e\u3067\u500b\u4eba\u7684\u306b\u306f\u6c17\u306b\u306a\u3089\u306a\u3044\u7bc4\u56f2\u3002<\/p>\n https:\/\/qiita.com\/taront\/items\/26c8e525a6f6524c0b69<\/a><\/p>\n\u30b5\u30f3\u30d7\u30eb<\/h2>\n
\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9<\/h2>\n
<html lang=\"ja\">\r\n<head>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no\">\r\n<meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\">\r\n<title>amCharts \u30c7\u30e2<\/title>\r\n<\/head>\r\n<body>\r\n\r\n<!-- Styles -->\r\n<style>\r\n#chartdiv {\r\n width: 100%;\r\n height: 500px;\r\n}\r\n\r\n<\/style>\r\n\r\n<!-- Resources -->\r\n<script src=\"https:\/\/cdn.amcharts.com\/lib\/4\/core.js\"><\/script>\r\n<script src=\"https:\/\/cdn.amcharts.com\/lib\/4\/charts.js\"><\/script>\r\n<script src=\"https:\/\/cdn.amcharts.com\/lib\/4\/themes\/animated.js\"><\/script>\r\n\r\n<!-- Chart code -->\r\n<script>\r\nam4core.ready(function() {\r\n\r\n\/\/ Themes begin\r\nam4core.useTheme(am4themes_animated);\r\n\/\/ Themes end\r\n\r\nvar chart = am4core.create(\"chartdiv\", am4charts.XYChart);\r\n\r\nvar data = [];\r\nvar value = 50;\r\nfor(var i = 0; i < 300; i++){\r\n var date = new Date();\r\n date.setHours(0,0,0,0);\r\n date.setDate(i);\r\n value -= Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10);\r\n data.push({date:date, value: value});\r\n}\r\n\r\nchart.data = data;\r\n\r\n\/\/ Create axes\r\nvar dateAxis = chart.xAxes.push(new am4charts.DateAxis());\r\ndateAxis.renderer.minGridDistance = 60;\r\n\r\nvar valueAxis = chart.yAxes.push(new am4charts.ValueAxis());\r\n\r\n\/\/ Create series\r\nvar series = chart.series.push(new am4charts.LineSeries());\r\nseries.dataFields.valueY = \"value\";\r\nseries.dataFields.dateX = \"date\";\r\nseries.tooltipText = \"{value}\"\r\n\r\nseries.tooltip.pointerOrientation = \"vertical\";\r\n\r\nchart.cursor = new am4charts.XYCursor();\r\nchart.cursor.snapToSeries = series;\r\nchart.cursor.xAxis = dateAxis;\r\n\r\n\/\/chart.scrollbarY = new am4core.Scrollbar();\r\nchart.scrollbarX = new am4core.Scrollbar();\r\n\r\n dateAxis.zoom({start:0.9, end:1});\r\n\r\n}); \/\/ end am4core.ready()\r\n<\/script>\r\n\r\n<!-- HTML -->\r\n<div id=\"chartdiv\"><\/div>\r\n\r\n<\/body>\r\n<\/html><\/pre>\n\u30e9\u30a4\u30bb\u30f3\u30b9\u306b\u3064\u3044\u3066<\/h2>\n