홈>2020-02-01 01:30

javascript - billboardjs 차트의 동적 목록 작성

요소가 일련의 차트 속성 인 JSON 목록이 있습니다. D3과 billboard.js를 사용하여 HTML div 목록을 동적으로 생성하고 싶습니다. 각 요소에는 하나의 차트가 포함됩니다. 설정은이 피들 에 표시됩니다. 차트가 표시되는 동안 Error: <g> attribute transform: Trailing garbage, "translate(0,NaN)". 와 같은 여러 D3 오류가 발생합니다. 그리고 billboard.js 차트에는 이상한 [object Object] 가 있습니다 축 옆에 문자열이 나타납니다. 예를 들어 이름이 div 인 수동으로 만든 경우 이러한 오류가 나타나지 않습니다. HTML에 요소를 추가 한 다음 billboard.js 차트를 이에 바인딩했습니다.

javascriptd3.js

답변 # 1

차트 DOM 요소에 바인딩 된 데이터로 인해 문제가 발생합니다. 바인딩 된 데이터 만 삭제하면 문제가 해결됩니다.

d3.select(this).datum(null); 만 추가 반복 블록에. 스 니펫을 실행 한 결과를 확인하십시오.

var cdata = [
	{
		title: "Chart1",
		data: {
			columns: [
				["data1", 10, 20, 30],
				["data2", 50, 20, 10]
			]
		}
	},
	{
		title: "Chart2",
		data: {
			columns: [
				["data1", 10, 20, 30],
				["data2", 50, 20, 10]
			]
		}
	}
];
d3.select("#container").selectAll("div")
    .data(cdata)
    .enter()
    .append("div")
    .style("width", 200)
    .style("height", 200)
    .each(function(d) {
        // remove data set on DOM element
    	d3.select(this).datum(null);
        bb.generate({
	        data: d.data,
	        title: { text: d.title },
	        bindto: this
        });
});

<!doctype html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.css">
  <script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.pkgd.min.js"></script>
</head>
<body>
  <div id="container"></div>
</body>
</html>

Python2.net

javascript - billboardjs 차트의 동적 목록 작성

관련 자료