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

Question

我使用 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）？

Answer 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 解法：

我用'range'制作了新标签：

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 "";});

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

AmChart V4 : make each label in category axes clickable and give for each label different functionality

javascript

for-loop

amcharts

axes

amcharts4