billboard.js chart - legend 문자열 바꾸기 (Data name)

실컷 그룹핑을 해뒀는데, 그룹핑 한 문자열에 총 합을 추가 하려고 하니 그룹 자체의 문자열이 바뀌니 이차저차 고민하던 차에 먼저 그룹핑 다하고, 나중에 Data name을 바꾸는 방법으로 접근하면 되겠다라고 생각했다

 

그리고, 아래와 같이 처리했다.

장고 코드와 결합해서 사용하려니, 제약이 좀 많다.

암튼 성공

 

<script src="{% static 'vendor/d3/d3.min.js' %}"></script>
<script src="{% static 'vendor/billboard/billboard.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'vendor/billboard/datalab.min.css' %}">
<script>dayjs().format()</script>    
<script language="javascript">
var chart = bb.generate({
  // size: { height: 400 },
  data: {
    columns: [
    {% for item in result_billboard %}{{ item|safe }},{% endfor %}
    ],
    type: "area-spline", // for ESM specify as: areaSpline()
    groups: [[
    {% for item in result_groupby_product_count %}'{{ item.product_name|safe }}',{% endfor %}
    ]],
  },
  axis: {
    x: {
      tick: {format: function(x){return (x+1)+"월";}}
    }  
  },
  bindto: "#chart-container"
});
setTimeout(function() {
  chart.data.names({
{% for item in result_groupby_product_count %}
    '{{ item.product_name|safe }}' : '{{ item.product_name|safe }}({{ item.sum_count|intcomma }}개)', 
{% endfor %}
    });
}, 1000);

처음 그룹핑만

1초후 수량 정보 포함된 Data name으로 변경

참고사이트

https://naver.github.io/billboard.js/demo/#API.DataName

billboard.js - examples