感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

レーダーチャートを表示する

スポンサーリンク

レーダーチャートとは、複数の項目を縦軸にとり、縦軸の原点を1つにまとめて放射線状にした図のことです。
レーダーチャートは、その外観からスパイダ チャートまたはスターチャートとも呼ばれ、グラフの中心が始点で外側の輪を終点とする個別の軸に沿って各項目の値をプロットします。

highchartsを使って、ブラウザ上にレーダーチャートを描いてみましょう。

表示は以下のようなイメージです。

f:id:sho322:20140515062924j:plain

これを表示するサンプルは以下のように書きます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>highchartsのサンプル</title>

<style type="text/css">
.example-container {
    border: 1px solid #000;
    padding: 20px;
    float: left;
    margin: 10px;
}

.example {
    width: 300px;
    height: 300px;
    float: left;
}
.example + .example {
    margin-left: 60px;
}
</style>

<script src="js/jquery-1.11.1.js"></script>
<script src="js/highcharts.src.js"></script>
<script src="js/highcharts-more.src.js"></script>
<script>
$(document).ready(function() {
    var options;

    options = {
        chart: {
            polar: true,
            type: 'line'
        },
        title: {
            text: 'レーダーチャートでQCD比較'
        },
        xAxis: {
            categories: ["コスト", "品質", "納期"],
            tickmarkPlacement: 'on',
            lineWidth: 0            
        },
        yAxis: {
            gridLineInterpolation: 'polygon'
        },
        series: [{
            name: '中村データ',
            data: [25, 13, 5],
            pointPlacement: 'on'
        }, {
            name: '瑞穂総研',
            data: [5, 10, 30],
            pointPlacement: 'on'
        }, {
            name: 'スズキソリューション',
            data: [10, 28, 14],
            pointPlacement: 'on'
        }]        
    };

    $('#example1').highcharts(options);

});
</script>

</head>
<body>

<div class='example-container'>
    <div class='example' id="example1"></div>
</div>

</body>
</html>