javascript - 将Chart.JS的DataSource设置为Array

Question

这个问题已经有答案了:

From an array of objects, extract value of a property as array (25 个回答)

已关闭 3 年前。

早上 - 我正在 try catch 数组的值。意思是，我想忽略文本 MonthlySaleAmount 但捕获数值。这就是我的数组的样子

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

并使用chart.js，我尝试将数据设置为data: information，但这在我的图表上显示没有数据

Answer 1

我必须使用图表JS并遇到这个问题，这很简单

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

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

尝试使用console.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");
                }
            });
        }

这也是为多个图形而不仅仅是一个而设计的