Amchart 4：如何在 Sunburst 钻取图表中包装文本标签？如何在此添加标签

Question

我正在使用 Amcharts 4 Sunburst drill-down chart，在我的场景中，我有很长的文本标签，因此我试图将文本标签换行。现在，这是我的 js 代码：

am4core.ready(function() {

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

// create chart
var chart = am4core.create("chartdiv", am4plugins_sunburst.Sunburst);
chart.padding(0, 0, 0, 0);
chart.radius = am4core.percent(98);

chart.data = [{
  name: "First",
  children: [
    { name: "A1", value: 100 },
    { name: "A2", value: 60 }
  ]
},
{
  name: "Second",
  children: [
    { name: "B1", value: 135 },
    { name: "B2", value: 98 }
  ]
},
{
  name: "Third",
  children: [
    {
      name: "First big headline of the sunburst chart",
      children: [
        { name: "First big headline of the sunburst chart: EE1", value: 130 },
        { name: "First big headline of the sunburst chart: EE2", value: 87 },
        { name: "First big headline of the sunburst chart: EE3", value: 55 }
      ]
    },
    { name: "Second big headline of the sunburst chart", value: 148 },
    {
      name: "Third big headline of the sunburst chart", children: [
        { name: "Third big headline of the sunburst chart: CC1", value: 53 },
        { name: "Third big headline of the sunburst chart: CC2", value: 30 }
      ]
    },
    { name: "Fourth big headline of the sunburst chart", value: 26 }
  ]
}];

chart.colors.step = 2;
chart.fontSize = 11;
chart.innerRadius = am4core.percent(20);

// define data fields
chart.dataFields.value = "value";
chart.dataFields.name = "name";
chart.dataFields.children = "children";


var level0SeriesTemplate = new am4plugins_sunburst.SunburstSeries();
chart.seriesTemplates.setKey("0", level0SeriesTemplate)

level0SeriesTemplate.labels.template.wrap = true; // set wrap to true
level0SeriesTemplate.labels.template.truncate = false;
level0SeriesTemplate.labels.template.hideOversized = false;
level0SeriesTemplate.showOnInit = false;
level0SeriesTemplate.usePercentHack = false;

level0SeriesTemplate.radius = am4core.percent(90);
level0SeriesTemplate.innerRadius = am4core.percent(0);

let selectedState = level0SeriesTemplate.states.create("selected");
selectedState.properties.opacity = 0.7;
level0SeriesTemplate.defaultState.properties.radius = am4core.percent(100);

var currentlySelected;

level0SeriesTemplate.slices.template.events.on("over", function(event) {
  if(event.target.dataItem.sunburstDataItem.children){
   event.target.cursorOverStyle = am4core.MouseCursorStyle.pointer;
  }
})

level0SeriesTemplate.slices.template.events.on("hit", function(event) {
  zoomOutButton.show();
  var hitSlice = event.target;

  if (hitSlice.dataItem.sunburstDataItem.children) {

    var series = event.target.dataItem.component;
    
    if (!series.dummyData) {
      series.tooltip.disabled = true;
      hitSlice.dataItem.label.radius = (hitSlice.radius - hitSlice.pixelInnerRadius) - 7;
      hitSlice.dataItem.label.bent = true;
      hitSlice.dataItem.label.rotation = -180;      
      //hitSlice.dataItem.label.wrap = true;  // set wrap to true
      //hitSlice.dataItem.label.truncate = false;

      currentlySelected = hitSlice;
      series.dummyData = true;
      series.setState("selected");
      hitSlice.dataItem.sunburstDataItem.series.show();
      series.slices.each(function(slice) {
        if (slice != event.target) {
          slice.dataItem.hide();
        }
      })
    }
    else {
      drillUp(hitSlice);
    }
  }
})


level0SeriesTemplate.labels.template.adapter.add("rotation", function(rotation, target) {
  target.maxWidth = target.dataItem.slice.radius - target.dataItem.slice.innerRadius - 10;
  target.maxHeight = Math.abs(target.dataItem.slice.arc * (target.dataItem.slice.innerRadius + target.dataItem.slice.radius) / 2 * am4core.math.RADIANS);
  return rotation;
})

var level1SeriesTemplate = level0SeriesTemplate.clone();
level1SeriesTemplate.hidden = true;
level1SeriesTemplate.innerRadius = am4core.percent(10);
chart.seriesTemplates.setKey("1", level1SeriesTemplate)
level1SeriesTemplate.fillOpacity = 0.75;

var level2SeriesTemplate = level0SeriesTemplate.clone();
level2SeriesTemplate.hidden = true;
level2SeriesTemplate.innerRadius = am4core.percent(20);
chart.seriesTemplates.setKey("2", level2SeriesTemplate)

var zoomOutButton = chart.seriesContainer.createChild(am4core.ZoomOutButton);
zoomOutButton.visible = false;
zoomOutButton.horizontalCenter = "middle";
zoomOutButton.verticalCenter = "middle";
zoomOutButton.events.on("hit", function() {
  drillUp(currentlySelected)
})


function drillUp(slice) {
  collapse(slice);
  var series = slice.dataItem.component;
  series.tooltip.disabled = false;
  series.dummyData = false;
  series.setState("default");

  series.slices.each(function(slice) {
    slice.dataItem.label.wrap = true;  // set wrap to true
    slice.dataItem.label.truncate = false;
    if (slice != event.target) {
      slice.dataItem.show();
    }
  })

  if (series.parentDataItem.seriesDataItem) {
    currentlySelected = series.parentDataItem.seriesDataItem.slice;
  }
  else {
    zoomOutButton.hide();
  }
}


function collapse(slice) {
  //slice.dataItem.label.wrap = true;
  //slice.dataItem.label.truncate = false;
  slice.dataItem.label.bent = false;
  slice.dataItem.label.radius = 10;


  if (slice.dataItem.sunburstDataItem.children) {
    slice.dataItem.sunburstDataItem.children.each(function(child) {
      child.seriesDataItem.component.setState("hidden");
      collapse(child.seriesDataItem.slice);
    })
  }
}

}); // end am4core.ready()

在这里，如果你看到，我在 Sunburst 系列标签上将 true 设置为 wrap 属性，当它加载时，整个文本完美地包裹起来。 但是当您向上钻取和向下钻取时，问题就出现了。那就是整个文本没有结束的时候。而且看起来很乱。

1.图表加载时文本标签的状态：

2。向上钻取和向下钻取时文本标签的状态：

实时代码：JSFIDDLE

Answer 1

function collapse(slice) {
  //slice.dataItem.label.wrap = true;
  //slice.dataItem.label.truncate = false;
  slice.dataItem.label.bent = false;
  slice.dataItem.label.radius = 10;


//Edit
slice.dataItem.label.wrap = true; 
slice.dataItem.label.maxWidth = 120;  
//Edit



  if (slice.dataItem.sunburstDataItem.children) {
    slice.dataItem.sunburstDataItem.children.each(function(child) {
      child.seriesDataItem.component.setState("hidden");
      collapse(child.seriesDataItem.slice);
    })
  }
}

请查看这里了解更多详情https://www.amcharts.com/docs/v4/tutorials/wrapping-and-truncating-axis-labels/

Amchart 4：如何在 Sunburst 钻取图表中包装文本标签？如何在此添加标签

Amchart 4: How to wrap the text label in Sunburst drill-down chart? how to add labels in this

javascript

sunburst-diagram

amcharts4