Question

在最近的工作中，我正在实现ChartJS图表。但是我很难用从数据库中获得的数据来推广图形。

我要做什么： 我从数据库中获取数据，然后发送所需的数组信息。

然后在要使用的字段中提取数组。

这是我的代码js：

function charts(){
var ligEntrantes = [];
var registeredOrders = [];
var duvidasRegistradas = [];
var incidentesRegistrados = [];

$.ajax({
    url: '<?=base_url("/relatorios/auxiliar")?>',
    dataType: 'json',
    success: function(response){
        $(response.information).each(function(index, item){
            ligEntrantes.push(item.incomingCalls);
            registeredOrders.push(item.registeredOrders);
            duvidasRegistradas.push(item.doubt);
            incidentesRegistrados.push(item.incidents);
        });
        console.log(ligEntrantes);
    },
    error: function(response){
        console.error(response);
    }
})

Chart.defaults.global.hover.intersect = false;
var estados = ["Acre","Alagoas","Amapá","Amazonas","Bahia","Ceará","Distrito Federal","Espírito Santo","Goiás","Maranhão","Mato Grosso","Mato Grosso do Sul","Minas Gerais","Pará","Paraíba","Paraná","Pernambuco","Piauí","Rio de Janeiro","Rio Grande do Norte","Rio Grande do Sul","Rondônia","Roraima","Santa Catarina","São Paulo","Sergipe","Tocantins"];
var regionChartCanvas = document.getElementById("regionChart").getContext("2d");
var regionChart = new Chart(regionChartCanvas, {
    type: 'line',
    data: {
        labels: estados,
        datasets: [{
            label: 'Ligações Entrantes',
            data: ligEntrantes,
            backgroundColor: 'transparent',
            borderColor: 'rgba(46, 204, 113,1.0)',
            pointHoverBackgroundColor: 'rgba(46, 204, 113,1.0)',
            lineTension: 0
        },
        {
            label: 'Pedidos Registradas',
            data: registeredOrders,
            backgroundColor: 'transparent',
            borderColor: 'rgba(52, 152, 219,1.0)',
            pointHoverBackgroundColor: 'rgba(52, 152, 219,1.0)',
            lineTension: 0
        },
        {
            label: 'Dúvidas Registradas',
            data: duvidasRegistradas,
            backgroundColor: 'transparent',
            borderColor: 'rgba(52, 73, 94,1.0)',
            pointHoverBackgroundColor: 'rgba(52, 73, 94,1.0)',
            lineTension: 0
        },
        {
            label: 'Incidentes Registradas',
            data: incidentesRegistrados,
            backgroundColor: 'transparent',
            borderColor: 'rgba(231, 76, 60,1.0)',
            pointHoverBackgroundColor: 'rgba(231, 76, 60,1.0)',
            lineTension: 0
        }]
    },
    options: {
        animation: false,
        scales: {
            yAxes: [{
                stacked: true,
                autoSkip: false,
                beginAtZero: true
            }],
            xAxes: [{
                ticks: {
                    autoSkip: false
                }
            }]
        },
        tooltips: {
            mode: 'x',
            displayColors: true
        }
    },
});
};

但是，在加载页面时，不会生成图形。当我将鼠标移到图形上方时，在控制台中出现错误：

Uncaught TypeError: Cannot read property 'skip' of undefined --------- Chart.min.js:10

我已经在console.log的几部分代码中进行了测试，并且可以正常识别Array。

有人可以帮我吗？感谢处置。

Answer 1

ChartJS没有“ regionChart ”支持。以下链接提供了使用ChartJS的受支持图表的列表。我建议您首先使用硬编码值实现图表，当您能够使用硬编码绘制图表时，然后在下一步中从数据库中提取数据。

ChartJS charts

Chartjs：动态数据（数组）不起作用

1 个答案: