Можно ли отобразить всплывающую подсказку для имени категории с помощью Amchart v4? - PullRequest
Новая
       26

Можно ли отобразить всплывающую подсказку для имени категории с помощью Amchart v4?

0 голосов
/ 03 января 2019

Я использую «радар переменного радиуса» из Amchart V4. Я хочу отобразить всплывающую подсказку при наведении курсора на название категории, но не смог найти никакого решения. Подсказка нужна, потому что имя может быть очень длинным. На графике я планирую отображать только первые 10 символов категории. Подсказка будет иметь полное имя.

Создана страница на https://codepen.io/pzombade/pen/RExzbj?editors=0010

enter image description here

код: 

var chart = am4core.create("chartdiv", am4charts.RadarChart);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in

var label = chart.createChild(am4core.Label);
label.text = "Drag slider to change radius";
label.exportable = false;

chart.data = [
  {
    category: "One",
    value1: 8,
    value2: 2,
    value3: 4,
    value4: 3
  },
  {
    category: "Two",
    value1: 11,
    value2: 4,
    value3: 2,
    value4: 4
  },
  {
    category: "Three",
    value1: 7,
    value2: 6,
    value3: 6,
    value4: 2
  },
  {
    category: "Four",
    value1: 13,
    value2: 8,
    value3: 3,
    value4: 2
  }
];
chart.radius = am4core.percent(95);
chart.startAngle = 270 - 180;
chart.endAngle = 270 + 180;
chart.innerRadius = am4core.percent(60);

var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.labels.template.location = 0.5;
categoryAxis.renderer.grid.template.strokeOpacity = 0.1;
categoryAxis.renderer.axisFills.template.disabled = true;
categoryAxis.mouseEnabled = true;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = false;
valueAxis.renderer.grid.template.strokeOpacity = 0.05;
valueAxis.renderer.axisFills.template.disabled = true;
valueAxis.renderer.axisAngle = 260;
valueAxis.renderer.labels.template.horizontalCenter = "right";
valueAxis.min = 0;

var series1 = chart.series.push(new am4charts.RadarColumnSeries());
series1.columns.template.radarColumn.strokeOpacity = 1;
series1.name = "Series 1";
series1.dataFields.categoryX = "category";
series1.columns.template.tooltipText = "{name}: {valueY.value}";
series1.dataFields.valueY = "value1";
series1.stacked = true;

var series2 = chart.series.push(new am4charts.RadarColumnSeries());
series2.columns.template.radarColumn.strokeOpacity = 1;
series2.columns.template.tooltipText = "{name}: {valueY.value}";
series2.name = "Series 2";
series2.dataFields.categoryX = "category";
series2.dataFields.valueY = "value2";
series2.stacked = true;

var series3 = chart.series.push(new am4charts.RadarColumnSeries());
series3.columns.template.radarColumn.strokeOpacity = 1;
series3.columns.template.tooltipText = "{name}: {valueY.value}";  
series3.name = "Series 3";
series3.dataFields.categoryX = "category";
series3.dataFields.valueY = "value3";
series3.stacked = true;

chart.seriesContainer.zIndex = -1;

var slider = chart.createChild(am4core.Slider);
slider.start = 0.5;
slider.exportable = false;
slider.events.on("rangechanged", () => {
  var start = slider.start;
  chart.startAngle = 270 - start * 179 - 1;
  chart.endAngle = 270 + start * 179 + 1;
  valueAxis.renderer.axisAngle = chart.startAngle;
});

1 Ответ

0 голосов
/ 05 января 2019

Подсказка включена при предоставлении непустой строки / значения для tooltipText в нужном месте. В этом случае установка его на метках оси вызовет всплывающую подсказку оси (которая немного отличается от других подсказок, например, в том, что по умолчанию она черная и цепляется за периметр или в этом случае окружность диаграммы) при наведении курсора: 

categoryAxis.renderer.labels.template.tooltipText = "{category}";

Чтобы обрезать текст меток вашей оси, вы можете использовать адаптер на его textOutput (при этом text даст вам "{category}" для фактических сгенерированных меток, что не очень полезно в этом случае): 

var categoryCharacterLimit = 10;
categoryAxis.renderer.labels.template.adapter.add("textOutput", function(text) {
  if (text && text.length > categoryCharacterLimit) {
    return text.substr(0, categoryCharacterLimit) + "\u2026"; // unicode for ellipsis
  }
  return text;
});

Учитывая, что всплывающая подсказка по умолчанию будет такой же ширины, как и ее текст, вот быстрое исправление, чтобы ограничить ее ширину, обернуть и центрировать текст: 

categoryAxis.tooltip.maxWidth = 200;
categoryAxis.tooltip.label.wrap = true;
categoryAxis.tooltip.label.textAlign = "middle";

Если вы не хотите, чтобы всплывающая подсказка отображалась для уже достаточно коротких меток осей (см. «Один» в моей демонстрации ниже), вы также можете установить там адаптер, чтобы он возвращал пустую строку ("") (всплывающая подсказка, если текст есть, при возврате в пустую строку условие запуска больше не выполняется): 

categoryAxis.tooltip.label.adapter.add("textOutput", function(text) {
  if (text && text.length <= categoryCharacterLimit) {
    return "";
  }
  return text;
});

Вот демонстрация со всем, что собрано вместе:

https://codepen.io/team/amcharts/pen/64e5da963cc3822fc95bac15a8f56b09

Если вам нужно настроить внешний вид всплывающей подсказки оси, вот дополнительная информация об этом:

https://www.amcharts.com/docs/v4/concepts/axes/axis-tooltips/#Modifying_tooltip_appearance https://www.amcharts.com/docs/v4/concepts/series/#Tooltip_colors

...