맨위로가기
 

SBCHART

닫기

JSON Data

#latest  #data

JSON-타입의 데이터를 사용합니다.
JSON-타입의 데이터를 사용하는 경우는 data.keys 옵션을 반드시 지정해야 합니다.
axis.x.type="category" 로 지정하면 data.keys.x 에 지정된 속성의 값이 X축 Tick에 자동으로 표시됩니다.

Options

data.json

JSON-타입의 데이터를 지정합니다.

Example

Code

var chart = sb.chart.render("#chartWrap", {
    data: {
        type: "bar",
        json: [
            {"region":"전국", "2015":3.51, "2016":0.71, "2017":1.48},
            {"region":"서울", "2015":4.6, "2016":2.14, "2017":3.64},
            {"region":"부산", "2015":3.43, "2016":3.18, "2017":2.35},
            {"region":"대구", "2015":7.96, "2016":-1.84, "2017":1.29},
            {"region":"인천", "2015":3.37, "2016":0.79, "2017":1.42},
            {"region":"광주", "2015":5.83, "2016":0.35, "2017":1.34},
            {"region":"대전", "2015":0.35, "2016":0.28, "2017":1.51},
            {"region":"울산", "2015":3.23, "2016":0.44, "2017":-1.08},
            {"region":"세종", "2015":-0.09, "2016":0.79, "2017":4.29},
            {"region":"경기", "2015":4.47, "2016":0.84, "2017":1.67},
            {"region":"강원", "2015":2.21, "2016":1.33, "2017":2.4},
            {"region":"충북", "2015":1.13, "2016":-0.7, "2017":-0.36},
            {"region":"충남", "2015":0.77, "2016":-1.51, "2017":-0.53},
            {"region":"전북", "2015":0.35, "2016":0.09, "2017":1.98},
            {"region":"전남", "2015":0.92, "2016":1.05, "2017":2.23},
            {"region":"경북", "2015":2.65, "2016":-1.66, "2017":-0.9},
            {"region":"경남", "2015":1.64, "2016":-0.58, "2017":-1.62},
            {"region":"제주", "2015":8.08, "2016":4.63, "2017":1.66}
        ],
        keys: {
            x: "region",
            value: ["2015", "2016", "2017"]
        }
    },
    axis: {
        x: {
            type: "category"
        }
    }
});
document.getElementById("txtJSON").onchange = function() {
    chart.data({
        json: JSON.parse(this.value)
    }).render();
};