Как отобразить несколько диаграмм Chart.JS на одной странице с данными и переменными AJAX

Question

Я пытаюсь создать компонент многократного использования линейного графика, который может получать переменную из модели для извлечения данных через AJAX и результат действия.Это прекрасно работает, когда на странице отображается одна диаграмма, но ломается, когда их несколько.

Я прошел различные уроки по созданию нескольких диаграмм на странице и могу заставить это работать, если диаграммыжестко закодированы с данными, но не если они основаны на вызове AJAX, который отображает все строки на одном и том же холсте.

Это JS для графиков:

var hiddens = document.getElementsByClassName("kpiclass");
for (hidden of hiddens) {
var kpidata = $(hidden).val();

$.ajax({

    type: "POST",
    url: "/Home/GetLineChartData",
    traditional: true,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    data: kpidata,
    success: function (iData) {
        var aData = iData;
        var aLabels = aData[0];
        var aDatasets1 = aData[1];
        var dataT = {
            labels: aLabels,
            datasets: [{

                data: aDatasets1,
                label: 'Value',
                backgroundColor: getStyle('--primary'),
                borderColor: 'rgba(255,255,255,.55)'
            }]
        };

        var charts = document.getElementsByName(kpidata);

        for (chart of charts) {


            var ctx = chart.getContext('2d');

            var myNewChart = new Chart(ctx, {
                type: 'line',
                data: dataT,
                options: {
                    responsive: true,
                    tooltipCaretSize: 0,
                    maintainAspectRatio: false,
                    legend: {
                        display: false
                    },
                    scales: {
                        xAxes: [{
                            gridLines: {
                                color: 'transparent',
                                zeroLineColor: 'transparent'
                            },
                            ticks: {
                                fontSize: 2,
                                fontColor: 'transparent'
                            }
                        }],
                        yAxes: [{
                            display: false,
                            ticks: {
                                display: false

                            }
                        }]
                    },
                    elements: {
                        line: {
                            borderWidth: 1
                        },
                        point: {
                            radius: 4,
                            hitRadius: 10,
                            hoverRadius: 4
                        }
                    }
                }


            });
        }
    }
});

, а вот сечение диаграммы компонента вида:

  <div>@Html.DisplayFor(model => model.Kpi.KpiMainName)</div>
  @Html.HiddenFor(model => model.Kpi.KpiId, new {  @class="kpiclass"})
</div>

<div class="chart-wrapper mt-3 mx-3" style="height:70px;">
  <div class="chartjs-size-monitor" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;"><div class="chartjs-size-monitor-expand" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;"><div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div></div><div class="chartjs-size-monitor-shrink" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;"><div style="position:absolute;width:200%;height:200%;left:0; top:0"></div></div></div>
  <canvas class="chart chartjs-render-monitor line" Name="@(Model.KpiId)" height="70" width="275" style="display: block; width: 275px; height: 70px;"></canvas>
  <div  class="chartjs-tooltip bottom top" style="opacity: 0; left: 22.5576px; top: 113.333px;" ><div class="tooltip-header"><div class="tooltip-header-item">January</div></div><div class="tooltip-body"><div class="tooltip-body-item"><span class="tooltip-body-item-color" style="background-color: rgb(0, 165, 224);"></span><span class="tooltip-body-item-label">My First dataset</span><span class="tooltip-body-item-value">65</span></div></div></div>
</div> 

Я прохожупеременная для вызова AJAX из скрытого поля в компоненте представления, чтобы извлечь нужные данные из ActionResult.Если я использую getElementsByName для сбора диаграмм на странице, вызов AJAX запускает правильное число раз, но отображает все строки до последнего холста на странице, если я получу getElementsByClassName, все строки будут отображаться на каждом холсте страницы, а не одна длякаждый, но можно увидеть только при наведении на график.Кажется, я не могу сопоставить правильные данные с правильным графиком, что бы я ни пытался.

У кого-нибудь есть предложения?

Answer 1

Я нашел способ использования функции .each после объединения различных ответов на похожие вопросы. Этот JS вызывается для каждой диаграммы всякий раз, когда на странице есть холст с классом "line". Надеюсь, это поможет другим.

$('.line').each(function (index, element) {

var kpidata = element.getAttribute('id');


$.ajax({

    type: "POST",
    url: "/Home/GetLineChartData",
    traditional: true,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    data: kpidata,
    success: function (iData) {
        var aData = iData;
        var aLabels = aData[0];
        var aDatasets1 = aData[1];
        var dataT = {
            labels: aLabels,
            datasets: [{

                data: aDatasets1,
                label: 'Value',
                backgroundColor: getStyle('--primary'),
                borderColor: 'rgba(255,255,255,.55)'
            }]
        };


        var ctx = element.getContext('2d');

        var myNewChart = new Chart(ctx, {
            type: 'line',
            data: dataT,
            options: {
                responsive: true,
                tooltipCaretSize: 0,
                maintainAspectRatio: false,
                legend: {
                    display: false
                },
                scales: {
                    xAxes: [{
                        gridLines: {
                            color: 'transparent',
                            zeroLineColor: 'transparent'
                        },
                        ticks: {
                            fontSize: 2,
                            fontColor: 'transparent'
                        }
                    }],
                    yAxes: [{
                        display: false,
                        ticks: {
                            display: false

                        }
                    }]
                },
                elements: {
                    line: {
                        borderWidth: 1
                    },
                    point: {
                        radius: 4,
                        hitRadius: 10,
                        hoverRadius: 4
                    }
                }
            }


        }
        );
    }
});


});