<head>
<link rel="stylesheet" href="https://naver.github.io/billboard.js/release/latest/dist/theme/insight.min.css">
<script src="https://naver.github.io/billboard.js/release/latest/dist/billboard.pkgd.min.js"></script>
</head>
<body>
<div class="left" id="chart1"></div>
<script type="text/javascript">
var chart1 = bb.generate({
data: {
columns: [ //각 차트 데이터
["data1", 30, 200],
["data2", 130, 100],
["data3", 130, 100],
["data1(%)", 50, 120],
["data2(%)", 20, 50],
["data3(%)", 200, 40],
],
type: "bar", //형태
types: {
"data1(%)": "line",
"data2(%)": "line",
"data3(%)": "line",
},
colors: { //색상
"data1": "red",
"data2": "blue",
"data3": "green",
"data1(%)": "red",
"data2(%)": "blue",
"data3(%)": "green",
},
groups: [ //그룹화
[
"data1",
"data2",
"data3",
]
]
},
axis: {
x: {
type: "category",
categories: [
"2022-01","2022-02",
]
}
},
bar: {
width: {
ratio: 0.5
}
},
bindto: "chart1"
});
chart.resize({ //차트 사이즈
width: 500,
height: 300,
});
</body>