Chart.js를 사용하여 버블 차트 표시

13268 단어 chart.js자바스크립트
Chart.js를 사용하여 버블 차트를 표시 할 때의 샘플 소스입니다.

test_chart_bubble.html
<html>
<head>
<title>Chart.jsバブルチャートテスト</title>
<meta name="description" content="Chart.js">
<meta name="keywords" content="Chart.js">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="js_bubble/Chart.min.js"></script>
<script type="text/javascript" src="js_bubble/Chart.bundle.min.js"></script>
<script type="text/javascript" src="js_bubble/chart_bubble_test.js"></script>

</head>

<body bgcolor="lightcyan" >
<!--バブルチャートの箇所 -->
<canvas id="bubblechart" height="450" width="600"></canvas>

</body>
</html>

chart_bubble_test.js
$(function(){
    // バブルチャートのデータ
    var bubleChartData = {
        datasets: [
            {
               // データ(1個目)
               data: [{"x":10 ,"y":10, "r":30} ,],
               // 色（1個目）
               backgroundColor:[ "rgb(141,63,223)" ],
               // ラベル
               label: ["test1"] 
            },
            {
                // データ(2個目)
                data: [{"x":20 ,"y":20, "r":50} ,],
                // 色（2個目）
                backgroundColor:[ "rgb(141,29,73)"],
                // ラベル（2個目）
                label: ["test2"]  
            },
            {
                // データ(3個目)
                data: [{"x":30 ,"y":30, "r":70} ,],
                // 色（3個目）
                backgroundColor:["rgb(16,230,73)"],
                // ラベル（3個目）
                label: ["test3"]  
            }
        ]};

    // オプション
    var options = {
          // タイトル
          title: {
            display: true,
            text: 'バブルチャートテスト'
          },
          // スケール
          scales: {
              // x軸
              xAxes: [{
                  ticks: {max: 50, min: 0,stepSize: 10}
              }],
              // x軸
              yAxes: [{
                  ticks: {max: 50,min: 0,stepSize: 10}
              }]
          },
          // tooltip
          tooltips: {
              callbacks: {
                 label: function(t, d) {
                    var rLabel = d.datasets[t.datasetIndex].data[t.index].r;
                    return d.datasets[t.datasetIndex].label + 
                           ': (x軸:' + t.xLabel + ', y軸:' + t.yLabel + ', 円の大きさ:' + rLabel + ')';
                 }
              }
           }
    };

    // コンテキストのオブジェクト
    var ctx = $("#bubblechart")[0].getContext("2d");
    // バブルチャートの描画
    var bubbleChart = new Chart(ctx, 
            {
               type: 'bubble',
               data: bubleChartData,
               options: options
            });

});

상기 소스라면 이런 식으로 표시됩니다.


참고 사이트



　・ chart.js 입문
　・ 버블 차트 · Chart.js 한국어 문서
Undocumented Chart.js
Chart.js에서 X가 부등 간격으로 꺾은 선 그래프를 그립니다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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