맨위로가기
 

SBCHART

닫기

Broken Options

#latest  #options

Broken 차트 고유 옵션입니다.

Options

  • global.broken.show

  • global.broken.brokenLineColor

    Broken Line의 색상을 설정합니다.

  • global.broken.brokenMinValue.y

    brokenMinValue.y값을 지정합니다.

  • global.broken.brokenMaxValue.y

    brokenMaxValue.y값을 지정합니다.

  • global.broken.brokenGapHeight

    Broken의 Gap 간격을 지정합니다. (값의 범위 : 15 ~ 40)

  • global.broken.brokenRatio

    Broken선의 위치(위,아래)를 지정합니다. (값의 범위 : 0, 0.1, .., ~ 1)

  • global.broken.brokenWaveWidth

    Broken선의 곡선의 넓이를 지정합니다.

  • global.broken.brokenWaveRatio

    Broken선의 곡선도를 지정합니다. (값의 범위 : 0, 0.1, .., ~ 1)

Example

사용 가능 차트 :

Code

var chart = sb.chart.render("#chartWrap", {
    global: {
        broken : {
            show : true,
            brokenMinValue : {'y' : 10000},
            brokenMaxValue : {'y' : 40000},
            brokenGapHeight : 20,
            brokenRatio : 0.5,
            brokenLineColor : "#FF5A46",
            brokenWaveWidth : 30,
            brokenWaveRatio : 0.5,
        },
    },
    data: {
        type: "bar",
        columns: [
            ["data1",51621,45275,6896,3328,3881,2771,578,2391,1670,2959,3620,4987,5317,10631,2852,6360,1280],
        ]
    },
    axis : {
        x : {
            type : "category",
            categories : ["서울", "경기도", "인천", "충북", "충남", "대전", "세종", "전북", "전남", "광주", "강원", "경북", "경남", "대구", "울산", "부산", "제주"],
            label : {
                text : "코로나 확진자 현황 ( 2021-07-05일 00시 기준 자료 )",
                position : "outer-center",
            },
            tick :{
                fit : true,
                outer : false,
                rotate : 0,
                multiline : false,
                width : 30,
                centered : false,
                line : {
                    show : true
                },
                text : {
                    show : true
                },
            },
        },
        y : {
            label : {
                text : "단위:만명",
                position : "outer-right",
            },
            tick :{
                format : function(d) {
                    return (d/1000).toFixed(2)+;
                },
                count : 6,
            },
        }
    },
    grid : {
        x : {
            show : true,
        }
    }
});