treemapChart (트리맵 챠트)

java 데이터 만드는 부분

String  TreeChartListN = "";

String pst = "{name: '긍정',children: [{name: '0%',value: 1,color: '#12c3ac'}]}";

String nst = "{name: '중립',children: [{name: '0%', value: 1 ,color: '#b7b7b7'}]}";

String nvst = "{name: '부정',children: [{name: '0%',value: 1 ,color: '#fa879e'}]}";

TreeChartListN = "["+pst+","+nst+","+nvst+"]";

model.addAttribute("TreeChartListN"              ,TreeChartListN);

jsp 부분

function treemapCahrt() {

am4core.options.commercialLicense = true; 

var chart = "";

var treedata = "";

var chart = am4core.create("chartdivNT", am4charts.TreeMap);

chart.autoMargins= false;

var treedata = ${TreeChartListN};

chart.data = treedata;

// define data fields

chart.dataFields.value = "value";

chart.dataFields.name = "name";

chart.dataFields.children = "children";

chart.dataFields.color = "color";

chart.zoomable = false;

// level 1 series template

var level1SeriesTemplate = chart.seriesTemplates.create("1");

var level1ColumnTemplate = level1SeriesTemplate.columns.template;

level1SeriesTemplate.tooltip.animationDuration = 0; // 챠트 애니메이션

level1SeriesTemplate.strokeOpacity = 1;

level1ColumnTemplate.fillOpacity = 1;

level1ColumnTemplate.strokeWidth = 1;

level1ColumnTemplate.stroke = am4core.color("#ffffff");

level1SeriesTemplate.columns.template.tooltipText ="{name}"

var bullet1 = level1SeriesTemplate.bullets.push(new am4charts.LabelBullet());

bullet1.locationY = 0.5;

bullet1.locationX = 0.5;

bullet1.label.fontSize = 10; //여기 폰트 크기 조절

bullet1.label.text = "{name}";

bullet1.label.fill = am4core.color("#ffffff");

bullet1.label.align = "center";

bullet1.label.valign = "middle";

}

<div id="chartdivNT" style="height:125px; width: 240px; margin-top: -10px; "></div>