Проблема доступа к массиву с помощью Higcharts, как я могу получить доступ к x позиции?

Question

Я пытаюсь получить доступ к позиции массива, переданной UserOptions, используя Highcharts.

Объявление серии, где я объявляю массив

Реализация

Проблема в том, что, когда я пытаюсь получить доступ к элементу этого массива, он не отображается.

Просто посмотрите:

Доступ к массиву

Однако, когда я обращаюсь к нему напрямую и печатаю его, используя console.log(), отображается это значение.

console.log(a.series[1].userOptions.cuotasPendientes[5]);

Прямой доступ

Thnx парни.

код:

  var a = Highcharts.chart('grafico-CIPrestamos-161107279383',{
    "chart": {
        "type": "column",
        "style": {
            "fontFamily": "Arial, Tahoma, Sans-serif",
            "fontSize": "11px"
        }
    },
    "credits": {
        "enabled": false
    },
    "legend": {
        "enabled": true,
        "useHTML": true,
        "itemMarginTop": 5,
        "labelFormatter": function() {
            return '<div class="highchartsCustom-legend-label">' + this.name + '</div>';
        }
    },
    "title": {
        "text": ""
    },
    "xAxis": {
        "type": "datetime",
        "dateTimeLabelFormats": {
            "month": "%b"
        },
        "title": "",
        "units": [
            ["month", [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]]
        ],
        "tickInterval": 1,
        "labels": {
            "useHTML": true,
            "format": "<span class=\"highchartsCustom-xAxis-label\">{value:%b}</span>",
            "rotation": 0
        },
        "plotLines": [{
            "color": "#ccc",
            "width": 1,
            "value": 1525132800000,
            "dashStyle": "Dash",
            "label": {
                "useHTML": true,
                "text": "<span class=\"highchartsCustom-xAxis-plotLine-label\">2018</span>",
                "rotation": 90
            }
        }, {
            "color": "#ccc",
            "width": 1,
            "value": 1546300800000,
            "dashStyle": "Dash",
            "label": {
                "useHTML": true,
                "text": "<span class=\"highchartsCustom-xAxis-plotLine-label\">2019</span>",
                "rotation": 90
            }
        }]
    },
    "yAxis": {
        "allowDecimals": false,
        "min": 0,
        "title": "",
        "labels": {
            "useHTML": true,
            "format": "<span class=\"highchartsCustom-yAxis-label\">{value:,.0f}</span>"
        },
        "stackLabels": {
            "enabled": false
        }
    },
    "tooltip": {
        "useHTML": true,
        "headerFormat": "<table class=\"highchartsCustom-tooltip\">",
        "pointFormat": "<tr><td class=\"highchartsCustom-tooltip-fecha\">{point.x:%B %Y}</td></tr><tr><td class=\"highchartsCustom-tooltip-linkedParent\">{point.series.linkedParent.name}</td></tr><tr><td class=\"highchartsCustom-tooltip-serie\">FIELD:{point.series.userOptions.cuotasPendientes[3]}</td></tr><tr><td class=\"highchartsCustom-tooltip-serie\">{point.series.name}: <span>{point.y}</span></td></tr><tr><td class=\"highchartsCustom-tooltip-total\">Total: <span>{point.stackTotal:,.0f}</span></td></tr>",
        "footerFormat": "</table>",
        "style": {
            "padding": "1px"
        }
    },
    "plotOptions": {
        "series": {
            "pointStart": 1525132800000,
            "pointIntervalUnit": "month",
            "pointWidth": 20,
            "events": {
                "legendItemClick": function(event) {
                    var cantidadSeleccionables = event.target.chart.series.length - 1;

                    if (event.target.visible && cantidadSeleccionables > contadorCIPrestamos) {
                        contadorCIPrestamos += 1;
                        return true;
                    }
                    if (!event.target.visible) {
                        contadorCIPrestamos -= 1;
                        return true;
                    }
                    return false;
                }
            }
        },
        "column": {
            "stacking": "normal",
            "dataLabels": {
                "enabled": false
            }
        }
    },
    "series": [{
        "name": "BCO 1",
        "id": "BCO1",
        "linkedTo": null,
        "data": null,
        "color": "#B07CD8",
        "CuotasPendientes": null,
        "vigente": "La bco es vighente",
        "Estado": null,
        "CapitalOriginal": 0.0,
        "TotalCuotas": 0
    }, {
        "name": "PP1",
        "id": null,
        "linkedTo": "BCO1",
        "data": [22.0, 23.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0],
        "color": "#B07CD8",
        "cuotasPendientes": [0, 0, 223, 223, 223, 223, 223, 223, 223, 223, 223],
        "vigente": "La serie es vigente",
        "Estado": null,
        "CapitalOriginal": 0.0,
        "TotalCuotas": 0
    }],
    "colors": ["#B07CD8"]})


console.log(a.series[1].userOptions.cuotasPendientes[5]);

Answer 1

Я попытался использовать formatther, и он работает, также я обнаружил способ доступа тоже.

Вместо использования point.series.cuotasPendientes[2], мы должны использовать point.series.cuotasPendientes.2

Спасибо за все.

Answer 2

Вы можете вызывать его напрямую или проходить через CuotasPendientes ur значение таким образом, и не забудьте проверить значение CuotasPendientes, если его ноль, цикл не будет обрабатываться (я уже добавил его, проверка на ноль).

console.log(a.series[1].CuotasPendientes[0])

for(let i = 0 ; i < a.series.length; i++){
  if (a.series[i].CuotasPendientes != null) {
    for (x of a.series[i].CuotasPendientes) {
      console.log(x)
    }
  }
}

Надеюсь на помощь