Amcharts4 - 如何显示/隐藏单个列 categoryAxis 标签？

Question

我正在使用 Amcharts4 生成柱形图。我使用以下代码隐藏了 categoryAxis 上的所有轴标签：

categoryAxis.renderer.labels.template.hide();

当悬停在特定列上时，我想在 categoryAxis 上仅显示与该列对应的轴标签。我尝试使用此代码，但它一次启用/禁用所有标签，而不是我要启用/禁用轴标签的特定列。

function showLabels(ev){
categoryAxis.renderer.labels.template.show();
}

function hideLabels(ev){
categoryAxis.renderer.labels.template.hide();
}

series.columns.template.events.on("over", showLabels, this);
series.columns.template.events.on("out", hideLabels, this);

我需要一些方法来引用单个列。我猜我必须为此使用 ev.target 和 dataItem 或 dataContext，但我不太确定。谁能帮帮我？

Answer 1

我不熟悉这个库，但觉得这个问题很有趣，所以希望下面的答案可以帮助你。

以下代码是如何隐藏和显示单个标签的核心部分：

chart.events.on('ready', () => {
    // hide all label when the chart is ready on DOM
    categoryAxis.renderer.labels.values.forEach((v) => v.visible = false)
});

function showLabels(ev) {
  // find the current selected column index and make the label visible
  const columnIndex = ev.target.dataItem.index + 1;
  categoryAxis.renderer.labels.values[columnIndex].visible = true;
}

function hideLabels(ev) {
  // find the current selected column index and make the label invisible
  const columnIndex = ev.target.dataItem.index + 1;
  categoryAxis.renderer.labels.values[columnIndex].visible = false;
}

series.columns.template.events.on("over", showLabels, this);
series.columns.template.events.on("out", hideLabels, this);

附上代码 sn-p 供你玩：

am4core.ready(function () {
        // Themes begin
        am4core.useTheme(am4themes_animated);
        // Themes end

        // Create chart instance
        var chart = am4core.create("chartdiv", am4charts.XYChart);

        // Add data
        chart.data = [
          {
            country: "USA",
            visits: 2025,
          },
          {
            country: "China",
            visits: 1882,
          },
          {
            country: "Japan",
            visits: 1809,
          },
          {
            country: "Germany",
            visits: 1322,
          },
          {
            country: "UK",
            visits: 1122,
          },
          {
            country: "France",
            visits: 1114,
          },
          {
            country: "India",
            visits: 984,
          },
          {
            country: "Spain",
            visits: 711,
          },
          {
            country: "Netherlands",
            visits: 665,
          },
          {
            country: "Russia",
            visits: 580,
          },
          {
            country: "South Korea",
            visits: 443,
          },
          {
            country: "Canada",
            visits: 441,
          },
          {
            country: "Brazil",
            visits: 395,
          },
        ];

        // Create axes

        var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
        categoryAxis.dataFields.category = "country";
        categoryAxis.renderer.grid.template.location = 0;
        categoryAxis.renderer.minGridDistance = 30;

        var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

        // Create series
        var series = chart.series.push(new am4charts.ColumnSeries());
        series.dataFields.valueY = "visits";
        series.dataFields.categoryX = "country";
        series.name = "Visits";
        series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
        series.columns.template.fillOpacity = 0.8;

        var columnTemplate = series.columns.template;
        columnTemplate.strokeWidth = 2;
        columnTemplate.strokeOpacity = 1;

        /** [Start] - Hide/show Label **/
        chart.events.on('ready', () => {
            // hide all label when the chart is ready on DOM
            categoryAxis.renderer.labels.values.forEach((v) => v.visible = false)
        });

        function showLabels(ev) {
          // find the current selected column index and make the label visible
          const columnIndex = ev.target.dataItem.index + 1;
          categoryAxis.renderer.labels.values[columnIndex].visible = true;
        }

        function hideLabels(ev) {
          // find the current selected column index and make the label invisible
          const columnIndex = ev.target.dataItem.index + 1;
          categoryAxis.renderer.labels.values[columnIndex].visible = false;
        }
        
        series.columns.template.events.on("over", showLabels, this);
        series.columns.template.events.on("out", hideLabels, this);
        /** [End] - Hide/show Label */

      });

#chartdiv {
  width: 100%;
  height: 500px;
}

<div id="chartdiv"></div>
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>