问treemap 4树图气球

EN

// The default `tooltipText` for all columns, e.g.
// `chart.series.getIndex(0).columns.template.tooltip`, is
// `"{parentName} {name}: {value}"`
//
// Let's keep {parentName} on a separate line in `tooltipText`, and play with
// font size, colors, and style. (Note we cannot nest formatting brackets.)
//
// More on string and visual formatting:
// https://www.amcharts.com/docs/v4/concepts/formatters/formatting-strings/
level1SeriesTemplate.columns.template.tooltipText =
  "[bold font-size: 22px; #fff]{parentName}[/]\n[font-size: 20px]{name}:[/] [font-size: 20px #fff]{value}[/]";

// Looking over this chart type, i.e. TreeMap, we find it has a
// seriesContainer property:
// https://www.amcharts.com/docs/v4/reference/treemap/#seriesContainer_property
//
// and all containers have a "childadded" event:
// https://www.amcharts.com/docs/v4/reference/container/#childadded_event
//
// which works just as expected.
//
// More on events here:
// https://www.amcharts.com/docs/v4/concepts/event-listeners/
chart.seriesContainer.events.on("childadded", function(event) {
  // The chart will load with the initial series at first,
  // we're not interested in that.
  if (chart.series.length === 1) return;

  // Once we click a car company / TreeMap column, a new series will be generated
  // and added to the seriesContainer. Here, event.target will be the seriesContainer,
  // and event.newValue will always be the new TreeMapSeries.
  var series = event.newValue;

  // level-/depth-specific code, if you wanted
  // if (series.level === 1) {
  // }

  // The series exists, but is not ready/populated yet. In general, datavalidated
  // is a good event to check against for initial load/readiness of a series.
  series.events.once("datavalidated", function() {
    series.columns.each(function(column) {
      // In order to customize tooltip colors, we need to set getFillFromObject to false,
      // otherwise as it sounds, it'll grab color data from the parent object.
      // https://www.amcharts.com/docs/v4/reference/tooltip/#getFillFromObject_property
      // https://www.amcharts.com/docs/v4/reference/tooltip/#getStrokeFromObject_property
      column.tooltip.getFillFromObject = false;
      // column.tooltip.getStrokeFromObject = false; // not needed, since it defaults to false
      column.tooltip.background.stroke = am4core.color("#fff");
      column.tooltip.background.strokeWidth = 3;
      column.tooltip.background.strokeOpacity = 0.3;

      // background of tooltip, let's make it darker than the column's bg.
      column.tooltip.background.fill = am4core.color(
        am4core.colors.brighten(column.fill.rgb, -0.3)
      );
      // let's also make it slightly transparent.
      column.tooltip.background.fillOpacity = 0.8;

      // tooltip text color, we can also set this via string visual formatting,
      // see `tooltipText` assignment further below.
      // Every Tooltip has a Label:
      // https://www.amcharts.com/docs/v4/reference/tooltip/#label_property
      // https://www.amcharts.com/docs/v4/reference/label/
      //
      // Let's make the default color brighter than the column bg color.
      column.tooltip.label.fill = am4core.color(
        am4core.colors.brighten(column.fill.rgb, 0.7)
      );
      // alignment of text within tooltip (cannot use string visual formatting for this).
      // Let's center the text, mainly the title/parent company.
      column.tooltip.label.textAlign = "middle";
    });
  });
});