AmCharts V4：使类别轴中的每个标签都可点击，并为每个标签提供不同的功能

Posted 2023-05-07

【中文标题】AmCharts V4：使类别轴中的每个标签都可点击，并为每个标签提供不同的功能

【英文标题】：AmChart V4 : make each label in category axes clickable and give for each label different functionality

【发布时间】：2021-11-21 03:11:56

【问题描述】：

我使用 amchart 4 创建了一个 XYChart。我想为 Y 轴上的每个标签赋予不同的功能：通过单击每个标签，它将显示不同的模式。

data = [ "name": "name1",
          "value1": "1",
          "value2": "2",
 
         "name": "name2",
          "value1": "10"
          "value2": "20"]

    var chart = am4core.create("chartdiv", am4charts.XYChart);
    chart.data = data;

    var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
    categoryAxis.dataFields.category = "name";

    var dateAxis = chart.xAxes.push(new am4charts.DateAxis());

为了使 Y 轴上的每个标签都可点击并显示模式，我添加了以下内容：

categoryAxis.renderer.labels.template.events.on("hit", function(event)
     $(document).ready(function()
            $("#mymodal").modal('show');
        );
)

当然，它所做的一切都会覆盖并为所有标签提供相同的模式。有没有办法单独访问标签（在标签上创建一个 forloop）？

【参考方案1】：

1 个解决方案：

我给每个标签一个不同的模式来显示 （感谢我的队长 Yaniv 的帮助=P）

我在数据中添加了一个变量“copy_num”：

data = [ "name": "name1",
          "value1": "1",
          "value2": "2",
          "copy_num": "1",
 
         "name": "name2",
          "value1": "10"
          "value2": "20",
          "copy_num": "2"]

然后：

categoryAxis.renderer.labels.template.events.on("hit", function(event)
     $(document).ready(function()
          $("#chartcopy" + 
              event.target.dataItem.dataContext.copy_num).modal('show');
        );
)

在 html 中我添加了模态：

<div class="copy modal fade" id="chartcopy1" role="dialog"></div>
<div class="copy modal fade" id="chartcopy2" role="dialog"></div>

2个解决方案：

我使用“范围”制作新标签：

https://www.amcharts.com/docs/v4/tutorials/grouping-axis-labels-using-ranges/ https://www.amcharts.com/docs/v4/tutorials/using-axis-ranges-on-radar-chart/

var range = categoryAxis.axisRanges.create();
range.category = "name1";
range.endCategory = "name2";
range.label.text = "label_1";
range.label.verticalCenter = "middle";
range.label.events.on("hit", function(event)
    $(document).ready(function()
        $(modal_to_show).modal('show');
    );
)

添加一些漂亮的设计：

range.label.cursorOverStyle = am4core.MouseCursorStyle.pointer;

range.label.background = new am4core.RoundedRectangle();
range.label.background.cornerRadius(5, 5, 5, 5);
range.label.background.fill = am4core.color("#eee");

range.label.truncate = true;
range.label.maxWidth = 180;

var hoverLabelState = range.label.background.states.create("hover");
hoverLabelState.properties.fill = am4core.color("#C0C0C0");

要禁用旧标签：

categoryAxis.renderer.labels.template.adapter.add("textOutput", function(text
                                                                  return "";);