使用laravel和ajax加载高图表数据

Load highcharts data with laravel and ajax

本文关键字:高图表 数据 加载 ajax laravel 使用      更新时间:2023-11-27

我在为高图表加载数据时遇到了这个问题。

从我的控制器的响应中,我得到了以下数据:

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

饼图显示不正确。我只能看到几行字,上面写着切片0.0%有什么想法吗?

在第一次列出此代码时

$(function () {

表示事件"文档就绪"

在第二个列表中,您在哪里调用函数grafica?正如我所看到的,您需要在ajax success函数

中调用它