与laravel和Ajax负载highcharts数据 [英] Load highcharts data with laravel and ajax

问题描述

我有这个问题，加载数据的highcharts图表。

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.

编辑： 我得到了它几乎工作，但有一点很奇怪。整个code与AJAX是：

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>

这是行不通的，因为数据没有被很好莫名其妙地接受，因为如果我使用具有数据ResponseData变量，不显示图表，不过，如果我直接写字符串

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]]

它的工作。 事实上，在执行console.log我看到变量 responseData 确实有数据串！

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]]

和饼图没有显示正确。我只能看到几行说的片0.0％的 任何想法？

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

推荐答案

在首批上市的这code

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

这篇关于与laravel和Ajax负载highcharts数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！