Load highcharts data with laravel and ajax

问题

i have this issue for loading data for a highcharts chart.

From the response of my controller i get the following data:

[['Doctorado', 91.86],['Maestría', 6.98],['Licenciatura', 1.16]]

And the call of the ajax is working fine, however, the chart is not displaying.

EDIT: I got it almost working, however there is something strange. The whole code with ajax is:

<script type="text/javascript">
      function handleData( responseData ) {
    // do what you want with the data
    console.log('Inside handle data function: ' + responseData);
        // Radialize the colors
        Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
            return {
                radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
                stops: [
                    [0, color],
                    [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
                ]
            };
        });
        $('#container').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: 'Investigadores por grado académico'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                        style: {
                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                        },
                        connectorColor: 'silver'
                    }
                }
            },
            series: [{
                type: 'pie',
                name: 'Porcentaje:',
                data: responseData/*THE DATA ARE NOT WELL RECEIVED HERE. But if i type "[['Doctorado', 91.86],['Maestría', 6.98],['Licenciatura', 1.16]]" directly, it does work! So why with the variable it doesn't work?*/
            }]
        });//Fin de la función de highcharts


    }

    $(document).ready(function() {
       $.ajax({
          url: '{{URL::route("query01")}}',
          type: 'GET',
          async: true,
          dataType: 'text',
          success: function(datos,status, XHR) {
              console.log('Data inside ajax is: ' + datos);
              handleData(datos);
          }
        });
    });
</script>

This is not working, since the data are not being well received somehow, because if i use the ResponseData variable that has the data, the chart is not displayed, however, if i write directly the string

[['Doctorado', 91.86],['Maestría', 6.98],['Licenciatura', 1.16]]

It does work. Indeed in the console.log i see the variable responseData does have that data string!

console.log():

Data inside ajax is: [['Doctorado', 91.86],['Maestría', 6.98],['Licenciatura', 1.16]]
Inside handle data function: [['Doctorado', 91.86],['Maestría', 6.98],['Licenciatura', 1.16]]

And the pie chart is not showing properly. I only can see several lines saying slice 0.0% Any ideas?

回答1:

In first listing this code

$(function () {

means event 'document ready'

In second listing, where are you calling your function grafica? As I see, you need to call it in ajax success function

来源：https://stackoverflow.com/questions/28551361/load-highcharts-data-with-laravel-and-ajax