使用 ajax 调用修复顶点图表

如何解决使用 ajax 调用修复顶点图表

我使用 https://apexcharts.com/ 作为我的网络，但我发现了一些奇怪的情况

当数据正确但图表不正确时如何修复图表数据？

我调用ajax返回时的数组数据

{
    "title": [
        "Aceh","Jabar","Jambi","Jogja","Metro"
    ],"total": [
        0,1
    ]
}

还有我的图表代码

axios.get(route('totalinputan')).then(function(response) {
    buildChart(response.data.title,response.data.total)
}).catch(function(error) {
    //
})

function buildChart(title,total) {
    Apex.tooltip = {
        theme: 'dark'
    }
    
    var options1 = {
        chart: {
            fontFamily: 'Quicksand,sans-serif',height: 365,type: 'area',zoom: {
                enabled: false
            },dropShadow: {
                enabled: true,opacity: 0.3,blur: 5,left: -7,top: 22
            },toolbar: {
                show: false
            },},colors: ['#1490cb'],dataLabels: {
            enabled: false
        },markers: {
            discrete: [{
                seriesIndex: 0,dataPointIndex: 7,fillColor: '#000',strokeColor: '#000',size: 5
            }]
        },subtitle: {
            text: 'Laporan Masuk',align: 'left',margin: 0,offsetX: -10,offsetY: 35,floating: false,style: {
                fontSize: '14px',color: '#888ea8'
            }
        },title: {
            text: '100',offsetY: 0,style: {
                fontSize: '25px',color: '#bfc9d4'
            },noData: {
            text: 'Loading...'
        },stroke: {
            show: true,curve: 'smooth',width: 2,lineCap: 'square'
        },series: total,labels: title,xaxis: {
            axisBorder: {
                show: false
            },axisTicks: {
                show: false
            },crosshairs: {
                show: true
            },labels: {
                offsetX: 0,offsetY: 5,style: {
                    fontSize: '12px',fontFamily: 'Quicksand,cssClass: 'apexcharts-xaxis-title',}
        },yaxis: {
            labels: {
                formatter: function(value,index) {
                    return parseInt(value)
                },offsetX: -15,cssClass: 'apexcharts-yaxis-title',grid: {
            borderColor: '#191e3a',strokeDashArray: 5,xaxis: {
                lines: {
                    show: true
                }
            },yaxis: {
                lines: {
                    show: true,}
            },padding: {
                top: 0,right: 0,bottom: 0,left: -10
            },legend: {
            position: 'top',horizontalAlign: 'right',offsetY: -50,fontSize: '16px',markers: {
                width: 10,height: 10,strokeWidth: 0,strokeColor: '#fff',fillColors: undefined,radius: 12,onClick: undefined,offsetX: 0,offsetY: 0
            },itemmargin: {
                horizontal: 0,vertical: 20
            }
        },tooltip: {
            theme: 'dark',marker: {
                show: true,x: {
                show: false,fill: {
            type: "gradient",gradient: {
                type: "vertical",shadeIntensity: 1,inverseColors: !1,opacityFrom: .28,opacityTo: .05,stops: [45,100]
            }
        },responsive: [{
            breakpoint: 575,options: {
                legend: {
                    offsetY: -30,}]
    }
    
    
    var chartIncomingReport = new ApexCharts(
        document.querySelector("#incoming_report"),options1
    );
    
    chartIncomingReport.render();
}

结果是

如您所见，来自服务器的数据是correct，但图表结果是错误的。

我的数据计数为 5，但始终在图表中显示 8。

我错过了什么吗？

请帮忙