Question

我有这个问题，用于加载高价图表的数据。

根据我的控制器的响应，我得到以下数据：

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

ajax的调用工作正常，但图表没有显示。

修改我得到它几乎工作，但有一些奇怪的东西。使用ajax的整个代码是：

<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变量，则不会显示图表，但是，如果我直接写入字符串

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

确实有效。确实在console.log中我看到变量responseData确实有那个数据字符串！

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

饼图未正确显示。我只能看到几行 slice 0.0％ 有什么想法吗？

Answer 1

首先列出此代码

$(function () {

表示事件'文档就绪'

在第二个列表中，您在哪里调用函数grafica？如我所见，您需要在ajax success函数

中调用它

使用laravel和ajax加载highcharts数据

1 个答案: