チャート描画プラグイン Chart.js

準備

<script src="https://code.jquery.com/jquery-X.X.X.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/X.X.X/Chart.bundle.min.js" type="text/javascript"></script>

<!--チャートを表示したいところに、canvas 要素を書く。-->
<canvas id="chart_sample" width="200" height="200"></canvas>

レーダーチャート

<script type="text/javascript">

　var ctx = $("#chart_sample");

　var data = {
　　// 数値項目
　　labels: ["人気", "将来性", "報酬", "使いやすさ", "フレームワーク"],
　　datasets: [
　　　//データ１
　　　{
　　　　label: "PHP",
　　　　// 背景
　　　　backgroundColor: "rgba(0,0,0,0.04)",
　　　　borderColor: "rgba(255,99,132,1)",
　　　　// ポインター
　　　　pointBackgroundColor: "rgba(179,181,198,1)",
　　　　pointBorderColor: "#fff",
　　　　pointHoverBackgroundColor: "#fff",
　　　　pointHoverBorderColor: "rgba(179,181,198,1)",
　　　　// データ数値
　　　　data: ["8", "8", "8", "8", "10"]
　　　},
　　　//データ２
　　　{
　　　　label: "Python",
　　　　backgroundColor: "rgba(0,0,255,0.03)",
　　　　borderColor: "rgba(255,167,38 ,1)",
　　　　pointBackgroundColor: "rgba(255,99,132,1)",
　　　　pointBorderColor: "#fff",
　　　　pointHoverBackgroundColor: "#fff",
　　　　pointHoverBorderColor: "rgba(255,99,132,1)",
　　　　data: ["9", "10", "7", "7", "7"]
　　　}
　　]
　};

　var myRadarChart = new Chart(ctx, {
　　//チャート種類
　　type: 'radar',

　　//上でセットしたデータ
　　data: data,

　　options: {
　　　animation:true/false,

　　　showTooltips:true/false,

　　　title:{
　　　　display:true/false
　　　},

　　　// 目盛
　　　scale:{
　　　　display:true/false,

　　　　pointLabels:{
　　　　　fontSize:10,
　　　　　fontColor:color_gray
　　　　},

　　　　// 目盛線
　　　　ticks:{
　　　　　// 最小値:0から
　　　　　beginAtZero:true/false,
　　　　　// 最大値
　　　　　max:8,
　　　　　// ラベル背景
　　　　　showLabelBackdrop:true/false
　　　　},

　　　　// グリッドライン(軸に対して垂直に走る目盛毎の線の事)
　　　　gridLines:{
　　　　　display:true/false,
　　　　　color:"rgb(0,0,0)",
　　　　　// 線の長さとスペース間隔
　　　　　borderDash:[10,10],
　　　　　// 線太さ
　　　　　lineWidth:1
　　　　},

　　　　pointLabels:{
　　　　　display:true/false,
　　　　　fontSize:16
　　　　}
　　　}
　　}
　});
</script>