Javascript 使用laravel和ajax加载highcharts数据

我有一个为highcharts加载数据的问题

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

[['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>

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

console.log：

并且饼图没有正确显示。我只能看到几行写着slice 0.0%

---

有什么想法吗？

首先列出这段代码

$(function () {

指事件“文件准备就绪”

在第二个清单中，您在哪里调用函数grafica？

---

如我所见，您需要在ajax成功函数中调用它

是的，现在我已经编辑了代码。奇怪的是，数据以某种方式没有正确地传递给函数。如果使用变量responseData，则不会显示图表。但是，如果我直接写入字符串数据[['Doctorado'，91.86]，'maestria'，6.98]，'Licenciatura'，1.16]]，那么它就可以工作了。事实上，在console.log中，我看到变量确实有那个数据字符串！尝试检查您的回复类型。也许您应该使用字符串，但从服务器获取json。您可以尝试在success函数中手动设置datos，以从示例[['Doctorado'，91.86]，'maestraía'，6.98]，'Licenciatura'，1.16]]中提取字符串数据。我尝试了数据类型：“text”，但仍然遇到相同的问题：/I不明白，在console.log中，我得到了应该的字符串。您确定需要在highcharts中使用字符串类型的数据吗？这个['Doctorado'，91.86]，'maestria'，6.98]，'Licenciatura'，1.16]]和这个['Doctorado'，91.86]，'maestria'，6.98]，'Licenciatura'，1.16]]是不同的类型。第一个是字符串，第二个是数组。检查它，如果您在handleData函数中需要json，请尝试在将其传递给handleData函数之前使用json.parse作为ajax响应。您可以使用console.logtypeofsomeVar检查变量的类型，在您的示例中，console.logtypeofresponse为什么删除了数据类型：json？将其设置回原位，否则您的数据将作为字符串传输，因此它将无法工作。。如果您设置了dataType:json，但这不起作用，那么您的json是不正确的。我将首先替换'->.@PawełFus，如果我将其作为json传递，数据将丢失，甚至不会显示console.log。我正在传递一个字符串数据。Json数据类型未正确处理，它的格式不同@PawełFus如果我从数据库中获取json数据，数据如下：[{Grado Acad\u00e9mico:Doctorado，subtotal:79}，{Grado Acad\u00e9mico:Maestr\u00eda，subtotal:6}，{Grado Acad\u00e9mico:Licenciatura，subtotal:1}]这种数组不会被highcharts很好地处理。此外，在log.console中，我得到[object object]，[object object]，[object object]，并且图表没有很好地显示出来。这就是为什么我做了一个函数来获取数据，就像这样：[['Doctorado'，91.86]，'maestraía'，6.98]，'Licenciatura'，1.16]。但是你当前的是一些字符串，它不适合高图的格式。。。正如我前面所说的，用双引号替换单引号：'->。然后，您可以这样做：data:JSON。parseresponseData@PawełFus我在JSON数据的第1行第3列得到一个错误：SyntaxError:JSON.parse:unexpected字符

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

$(function () {