将图表的数据源.JS设置为数组

Question

>Morning - 我正在尝试捕获我的数组的值。 意思是，我想忽略文本每月销售金额，但捕获数值。 这就是我的数组的样子

(19) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {MonthlySaleAmount: "45364"}
1: {MonthlySaleAmount: "242421"}
2: {MonthlySaleAmount: "37654"}
3: {MonthlySaleAmount: "139038"}

并使用图表.js我正在尝试将数据设置为数据：信息，但这在我的图表上没有显示任何数据

Answer 1

我不得不使用图表JS并遇到了这个问题，这很容易

 data = value.x.map(function (a) { return a.x; }); 

如果我记得的话，x 是值的名称

只需尝试使用控制台.log即可尝试

这是我填充图表实例的整个代码

 function GetGeometriaRegistos() {
            $.ajax({
                url: '/Geometrias/GetAll',
                dataType: "json",
                method: "get",
                data: { id: $('#MatrizId').val()},
                success: function (response) {
                    var isBlocked = response.isBlocked;
                    var grafico = response.grafico;
                    if (isBlocked) {
                        $('.blocked-overlay').fadeIn('slow');
                    }
                    let data;
                    var graficos = '';
                    var dataLabels = [];
                    componentes = grafico.map(function (a) { return a.componente; });
                    $.each(grafico, function (index, value) {
                        graficos += '<div class="frame">';
                        graficos += '<div class="content">';
                        graficos += '<canvas id="chart' + index + '" class="d-block w-100"></canvas>';
                        graficos += '</div>';
                        graficos += '</div>';
                        $('#content').html(graficos);
                    })
                    $.each(grafico, function (index, value) {
                        console.log(value);
                        data = value.x.map(function (a) { return a.x; });
                        $.each(data, function (index, value) {
                            dataLabels[index] = 'X' + (index + 1);
                        });

                        var ctx = document.getElementById('chart' + index).getContext('2d');
                        var myChart = new Chart(ctx, {
                            type: 'line',
                            data: {
                                labels: data,
                                datasets: [{
                                    label: value.componente,
                                    data: data,
                                    borderColor: ['rgba(54, 162, 235, 1)'],
                                    backgroundColor: 'blue',
                                    borderWith: 1,
                                    fill: false,
                                    pointRadius: 5,
                                    pointHoverRadius: 10
                                }],
                            },
                            options: {
                                responsive: true,
                                responsiveAnimationDuration: 400,
                                maintainAspectRatio: true,
                                scales: {
                                    yAxes: [{
                                        ticks: {
                                            beginAtZero: true,
                                            stepSize: 0.5,
                                        },
                                        scaleLabel: {
                                            display: true,
                                            labelString: 'Y'
                                        }
                                    }],
                                    xAxes: [{
                                        scaleLabel: {
                                            display: true,
                                            labelString: 'Médias'
                                        }
                                    }]
                                },
                                annotation: {
                                    drawTime: 'beforeDatasetsDraw',
                                    annotations: [{
                                        id: 'hline3',
                                        type: 'line',
                                        mode: 'horizontal',
                                        scaleID: 'y-axis-0',
                                        value: value.toleranciaInferior,
                                        borderColor: 'red',
                                        borderWidth: 1,
                                        label: {
                                            backgroundColor: "red",
                                            enabled: true
                                        },
                                    },
                                    {
                                        id: 'hline2',
                                        type: 'line',
                                        mode: 'horizontal',
                                        scaleID: 'y-axis-0',
                                        value: value.toleranciaSuperior,
                                        borderColor: 'red',
                                        borderWidth: 1,
                                        label: {
                                            backgroundColor: "red",
                                            enabled: true
                                        }
                                    }],
                                }
                            }
                        });
                    });
                },
                error: function (response) {
                    swal("Erro", response.responseText, "error");
                }
            });
        }

这也是为多个图形而不仅仅是一个图形制作的