チャート描画プラグイン 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>

Follow me!

前の記事

AWS CLI

次の記事

Zoom