チャート描画プラグイン Chart.js
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/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: [
//データ1
{
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"]
},
//データ2
{
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>