Usé amchart 4 para crear un XYChart. Quiero darle a cada etiqueta en los ejes Y una funcionalidad diferente: al hacer clic en cada uno de ellos, mostrará un modal diferente.
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());Para hacer clic en cada etiqueta en los ejes Y y mostrar un modal, agrego esto:
categoryAxis.renderer.labels.template.events.on("hit", function(event){ $(document).ready(function(){ $("#mymodal").modal('show'); }); })Pero, por supuesto, todo lo que hace es sobrescribir y dar el mismo modal para todas las etiquetas. ¿Hay alguna forma de acceder a las etiquetas individualmente (crear un forloop sobre las etiquetas)?
1 solución:
Le di a cada etiqueta un modal diferente para mostrar (Gracias a mi líder de equipo, Yaniv, por su ayuda =P)
Agregué a los datos una variable "copy_num":
data = [{ "name": "name1", "value1": "1", "value2": "2", "copy_num": "1"}, { "name": "name2", "value1": "10" "value2": "20", "copy_num": "2"}]Después:
categoryAxis.renderer.labels.template.events.on("hit", function(event){ $(document).ready(function(){ $("#chartcopy" + event.target.dataItem.dataContext.copy_num).modal('show'); }); })En HTML agregué los modales:
<div class="copy modal fade" id="chartcopy1" role="dialog"></div> <div class="copy modal fade" id="chartcopy2" role="dialog"></div>2 solución:
Usé 'rango' para hacer nuevas etiquetas:
https://www.amcharts.com/docs/v4/tutorials/grouping-axis-labels-using-ranges/ https://www.amcharts.com/docs/v4/tutorials/using-axis-ranges-on- gráfico de radar/
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'); }}); }})Añade un bonito diseño:
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");Para deshabilitar las etiquetas antiguas:
categoryAxis.renderer.labels.template.adapter.add("textOutput", function(text {return "";});