javascript - 在 Highchart js 中显示 Ajax 数据

Question

请我让这个 ajax 代码正常工作，但我的问题是如何在 highchart 上显示它。这是ajax代码

function ajaxGetRadiologyRecord() {
    let urlPath = 'http://' + window.location.hostname + ':8000/radiology/get-patient-radiology-record';
    let request = $.ajax({
        method: 'GET',
        url: urlPath,
    });
    request.done(function( response ) {
        console.log(response);
        let months = response.months;
        let monthlyRecord = response.monthly_record_count;
    });
}

当我记录响应时，数据在数组中。即月份和记录。我保留了单独的变量月和月记录。这是js highchart代码

Highcharts.chart('container', {
    chart: {
        type: 'column',
        events: {
            load: ajaxGetRadiologyRecord()
        }
    },
    title: {
        text: ''
    },
    xAxis: {
        categories: [
            'Jan',
            'Feb',
            'Masr',
            'Apr',
            'May',
            'Jun',
            'Jul',
            'Aug',
            'Sep',
            'Oct',
            'Nov',
            'Dec'
        ],
        crosshair: true
    },
    yAxis: {
        min: 0,
        title: {
            text: ''
        }
    },
    tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    exporting: {
        enabled: false
    },
    credits: {
        enabled: false
    },
    legend: {
        enabled: false
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0,
            borderRadius: 2
        }
    },
    series: [{
        name: 'Patients',
        data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1],
        color: {
            linearGradient: {
                x1: 0,
                x2: 0,
                y1: 0,
                y2: 1
            },
            stops: [
                [0, 'rgba(153, 153, 153, 0.5)'],
                [1, '#f3f4f4']
            ]
        }

    }]
});

我现在的问题是如何用来自 ajax 的月份和数据 [] 用来自 ajax 的每月记录替换类别数组。谢谢。

标签： javascriptajaxlaravelhighcharts

Answer 1

有不同的方法，但你可以这样做，

var chart = Highcharts.chart('container', {
    chart: {
        type: 'column',
        events: {
            load: ajaxGetRadiologyRecord()
        }
    },
            . . .
    series: [
         {
            name: 'Patients',
            data: []
          }
        ]
});

在这里定义你的系列，可以定义多个系列

function ajaxGetRadiologyRecord() {
    let urlPath = 'http://' + window.location.hostname + ':8000/radiology/get-patient-radiology-record';
    $.ajax({
        method: 'GET',
        url: urlPath,
    });
    request.done(function( response ) {
        console.log(response);
        chart.addSeries({
          name: "Patients",
          data: response.monthly_record_count
        });
    });
}