【ブロガー必見】amChartsを使ってレーダーチャートで遊んでみた

<!-- Styles -->
<style>
#chartdiv {
  width: 100%;
  height: 500px;
}

</style>

<!-- Resources -->
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>

<!-- Chart code -->
<script>
am4core.ready(function() {

// Themes begin
am4core.useTheme(am4themes_animated);
//am4core.useTheme(am4themes_dataviz);   //有効にすれば、青線の色を変更することができます。
// Themes end

/* Create chart instance */
var chart = am4core.create("chartdiv", am4charts.RadarChart);

/* Add data */
chart.data = [ {        //データの項目増減が可能です。
  "direction": "N",     //チャートの名前が変更されます。
  "value": 8            //チャートの値が変更されます。
}, {
  "direction": "NE",
  "value": 9
}, {
  "direction": "E",
  "value": 4.5
}, {
  "direction": "SE",
  "value": 3.5
}, {
  "direction": "S",
  "value": 9.2
}, {
  "direction": "SW",
  "value": 8.4
}, {
  "direction": "W",
  "value": 11.1
}, {
  "direction": "NW",
  "value": 10
} ];

/* Create axes */
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "direction";

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
//valueAxis.renderer.gridType = "polygons";
valueAxis.max = 12       //★追記しました★項目の上限を設定することができます。
valueAxis.min = 0        //★追記しました★項目の下限を設定することができます。

var range = categoryAxis.axisRanges.create();
range.category = "NW";
range.endCategory = "NW";
range.axisFill.fill = am4core.color("#0066CC");
range.axisFill.fillOpacity = 0.3;

var range2 = categoryAxis.axisRanges.create();
range2.category = "N";
range2.endCategory = "N";
range2.axisFill.fill = am4core.color("#0066CC");
range2.axisFill.fillOpacity = 0.3;

var range3 = categoryAxis.axisRanges.create();
range3.category = "SE";
range3.endCategory = "SW";
range3.axisFill.fill = am4core.color("#CC3333");
range3.axisFill.fillOpacity = 0.3;
range3.locations.endCategory = 0;

/* Create and configure series */
var series = chart.series.push(new am4charts.RadarSeries());
series.dataFields.valueY = "value";
series.dataFields.categoryX = "direction";
series.name = "Wind direction";
series.strokeWidth = 3;
series.fillOpacity = 0.2;
series.tooltipText = "{valueY.value}"        //★追記しました★項目の値を取得します。

// Add cursor
chart.cursor = new am4charts.RadarCursor();  //★追記しました★カーソルを表示させます。

}); // end am4core.ready()
</script>

<!-- HTML -->
<div id="chartdiv"></div>