chart.js에서 Qiita : Team/esa/DocBase를 비교하는 레이더 차트 작성 (범례 포함)

개요

chart.js에서 Qiita : Team/esa/DocBase를 비교하는 레이더 차트를 작성 (범례 포함)합니다.

주의사항

그래프의 내용은 적당합니다. 어디까지나 3자 비교를 하는 주제를 원했을 뿐입니다.

실제 Qiita:Team, esa, DocBase 의 기능에 대해서는 후술의 링크를 참조해 주세요.

샘플

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Qiita:Team / esa / DocBase の比較</title>
  <style>
    #legend {
        padding: 10px;
        overflow: hidden;
        position: relative;
    }
    ul.pie-legend {
        list-style: none outside none;
        float: left;
        margin: 0 0 0 0;
        padding: 0;
        position: relative;
        left: 50%;
    }
    ul.pie-legend > li {
        float: left;
        margin-right: 5px;
        padding: 5px;
        position: relative;
        left: -50%;
    }
  </style>
  <script src="Chart.min.js"></script>
  <script language="JavaScript"><!--
  function displayPieChart() {
    var data = {
        labels: ["デザイン", "フィードバック", "フロー", "ストック", "大規模利用", "コスト"],
        datasets: [
            {
                label: "Qiita:Team",
                fillColor: "rgba(200,0,0,0.2)",
                strokeColor: "green",
                pointColor: "green",
                pointStrokeColor: "green",
                pointHighlightFill: "green",
                pointHighlightStroke: "green",
                data: [4, 3, 5, 2, 4, 3]
            },
            {
                label: "esa",
                fillColor: "rgba(200,0,0,0.2)",
                strokeColor: "red",
                pointColor: "red",
                pointStrokeColor: "red",
                pointHighlightFill: "red",
                pointHighlightStroke: "red",
                data: [5, 5, 2, 5, 3, 3]
            },
            {
                label: "DocBase",
                fillColor: "rgba(200,0,0,0.2)",
                strokeColor: "yellow",
                pointColor: "yellow",
                pointStrokeColor: "yellow",
                pointHighlightFill: "yellow",
                pointHighlightStroke: "yellow",
                data: [3, 4, 2, 5, 5, 3]
            }
        ]
    };
    var ctx = document.getElementById("radarChart").getContext("2d");
    var options = { 
      legendTemplate : "<% for (var i=0; i<datasets.length; i++){%><span style=\"background-color:<%=datasets[i].strokeColor%>\">&nbsp;&nbsp;&nbsp;</span>&nbsp;<%if(datasets[i].label){%><%=datasets[i].label%><%}%><br><%}%>"
    };
    var radarChart = new Chart(ctx).Radar(data, options);
    document.getElementById("legend").innerHTML = radarChart.generateLegend();
  }
  --></script>
</head>
<body onload="displayPieChart();">
  <div class="box">
    <canvas id="radarChart" height="450" width="450"></canvas>
    <div id="legend"></div>
  </div>
</body>
</html>

GitHub

Chart.js 레이더 차트 샘플 GitHub

데모

Chart.js 레이더 차트 샘플

Qiita:Team / esa / DocBase 문서

외부 자료

chart.js docs

Reference

이 문제에 관하여(chart.js에서 Qiita : Team/esa/DocBase를 비교하는 레이더 차트 작성 (범례 포함)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/tbpgr/items/b9ff8b1c7c676c15e7d6

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다

chart.js에서 Qiita : Team/esa/DocBase를 비교하는 레이더 차트 작성 (범례 포함)

개요

주의사항

샘플

GitHub

데모

Qiita:Team / esa / DocBase 문서

정보 공유 도구 일반

Qiita:Team

미끼. 이오

DocBase

외부 자료

Reference

좋은 웹페이지 즐겨찾기