[#. chart] billboard.js 사용해서 그래프 그렸을 때 bar 색상에 gradient 사용하기

 

 

 

 

naver에서 지원하는 billboard.js를 사용해서 그래프를 그리고 있다

 

https://naver.github.io/billboard.js/release/latest/doc/index.html

Home - billboard.js API doc

 

 

 

 

 

 

일반적인 bar chart, 막대 차트를 생성했다고 했을 때 보통 이렇게 생성된다

 

 

var chart = bb.generate({
  data: {
    columns: [
	["data1", -100, 100, 200, [-100, 0],
	[0, 100],
	[100, 200]
    ],
	["data2", 100, 300, 500, [0, 100],
	[100, 300],
	[200, 500]
    ]],
    type: "bar", // for ESM specify as: bar()
  },
  bar: {
    width: {
      ratio: 0.5
    }
  },
  bindto: "#barChart_2"
});

 

 

 

 

 

 

 

 

gradient를 적용하면 이런 식으로 색상에 그라데이션을 줄 수 있다

 

 

var chart = bb.generate({
  data: {
    columns: [
	["data1", -100, 100, 200, [-100, 0],
	[0, 100],
	[100, 200]
    ],
	["data2", 100, 300, 500, [0, 100],
	[100, 300],
	[200, 500]
    ]],
    type: "bar", // for ESM specify as: bar()
  },
  bar: {
    width: {
      ratio: 0.5
    }
  },
  color: {
    tiles: function() {
     var gradient = d3.select(document.createElementNS(
           d3.namespaces.svg, "linearGradient")
 			)
            .attr("patternUnits", "userSpaceOnUse")
            .attr("x2", "0")
            .attr("y2", "100%");

      gradient.append("stop")
             .attr("offset", "0%")
             .attr("stop-color", "#FA79B1");

      gradient.append("stop")
			  .attr("offset", "50%")
			  .attr("stop-color", "#F9CB70");

      return [ gradient.node() ];
    }
  },
  bindto: "#barChart_2"
});

 

 

 

 

 

 

 

 

 

https://jsfiddle.net/mtq3vr1b/9/

(Billboard.js) Bar Chart with gradient - JSFiddle - Code Playground