Radar Options

#latest  #options

레이더(radar) 차트 고유 옵션입니다.

Options

  • extend.radar.area

    extend.radar.area = true/false

Axis
  • extend.radar.axis.show

    extend.radar.axis.show = true/false

  • extend.radar.axis.label

    extend.radar.axis.label = true/false

  • extend.radar.axis.maxValue

    최대값을 설정합니다.

Level
  • extend.radar.level.depth

    표시할 level 개수를 지정합니다. 표시하지 않으려면 0을 입력합니다.

  • extend.radar.level.label

    extend.radar.level.label = true/false

  • extend.radar.level.format

    extend.radar.level.format = function(value) { return value + "천만"; }

Example

Code

var chart = sb.chart.render("#chartWrap", {
    data: {
        type: "radar",
        x: "x",
        columns: [
            ["x", "Data A", "Data B", "Data C", "Data D", "Data E"],
            ["data1", 330, 350, 200, 380, 150],
            ["data2", 130, 100, 30, 200, 80],
            ["data3", 230, 153, 85, 300, 250]
        ]
    },
    extend: {
        radar: {
            area: true,
            axis: {
                show: true,
                label: true,
                maxValue: 500
            },
            level: {
                depth: 5 ,
                label: true,
                format: function(value) { return value + "천만"; }
            }
        }
    }
});
// area
document.getElementById("chkArea").onchange = function() {
    chart.extend({
        radar: {
            area: this.checked
        }
    }).render();
};
// show
document.getElementById("chkAxisShow").onchange = function() {
    chart.extend({
        radar: {
            axis: {
                show: this.checked
            }
        }
    }).render();
};
// axis.label
document.getElementById("chkAxisLabel").onchange = function() {
    chart.extend({
        radar: {
            axis: {
                label: this.checked
            }
        }
    }).render();
};
// maxValue
document.getElementById("axisMaxValue").onchange = function() {
    chart.extend({
        radar: {
            axis: {
                maxValue: this.value
            }
        }
    }).render();
}
// depth
document.getElementById("levelDepth").onchange = function() {
    chart.extend({
        radar: {
            level: {
                depth: this.value
            }
        }
    }).render();
}
// level.label
document.getElementById("chkLevelLabel").onchange = function() {
    chart.extend({
        radar: {
            level: {
                label: this.checked
            }
        }
    }).render();
};
// format
document.getElementById("chkLevelLabelFormat").onchange = function() {
    chart.extend().radar.level.format = this.checked ? function(value) { return value + "천만"; } : null;
    chart.render();
};