Question

我很难从URL设置数据。基本上，数据来自URL，然后将传递给Highcharts函数。

当我尝试使用console.log(data)进行登录时，它不会显示任何数据。我使用Laravel来获取路线中的数据和＃34;带有旋转标签的列＆＃34;作为图表。以下是我的代码：

图表：

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

这是一个数据字符串，在/ komputer / chart：

[['Shanghai', 23.7],['Florida',3],['Dubai', 1]]

Ajax脚本：

$(document).ready(function() {
    $.ajax({
    url: '{!! url("komputer/chart") !!}',
    type: 'GET',
    async: true,
    dataType: "text",
    success: function (data) {
    console.log(data); //display: [['Shanghai', 23.7],['PTJ1',3],['vbnvbn', 1]]
    $('#container').highcharts({
        console.log(data) //doesn't display anything
        chart: {type: 'column'},
        title: {text: 'World\'s largest cities per 2014'},
        subtitle: {text: 'Source: <a href="http://en.wikipedia.org/wiki/List_of_cities_proper_by_population">Wikipedia</a>'},
        legend: {enabled: false},
        tooltip: {pointFormat: 'Population in 2008: <b>{point.y:.1f} millions</b>'},
        xAxis: {
            type: 'category',
            labels: {rotation: -45,style: {fontSize: '13px',fontFamily: 'Verdana, sans-serif'}},
            title: {text: 'Cities'}
        },
        yAxis: {
            min: 0,
            title: {text:'Population (millions)'}
        },
        series: [{
            name: 'Population',
            data: data,
            dataLabels: {
                enabled: true,
                rotation: -90,
                color: '#FFFFFF',
                align: 'right',
                format: '{point.y:.1f}', 
                y: 10,
                style: {fontSize: '13px',fontFamily: 'Verdana, sans-serif'}
            }
        }]
    });  
    }
  });
 });

Answer 1

我通过查看本教程完成它，

http://www.knowstack.com/different-ways-of-loading-highcharts-data/

Ajax脚本：

 $(function() {

var processed_json = new Array();     

$.getJSON('{!! url("komputer/chart") !!}', function(data) {
    for(var key in data){
        processed_json.push(new Array(data[key].key, data[key].value));
    }

    $('#container').highcharts({
        chart: {type: 'column'},
        title: {text: 'World\'s largest cities per 2014'},
        subtitle: {text: 'Source: <a href="http://en.wikipedia.org/wiki/List_of_cities_proper_by_population">Wikipedia</a>'},
        legend: {enabled: false},
        tooltip: {pointFormat: 'Population in 2008: <b>{point.y:.1f} millions</b>'},
        xAxis: {
            type: 'category',
            labels: {rotation: -45,style: {fontSize: '13px',fontFamily: 'Verdana, sans-serif'}},
            title: {text: 'Cities'}
        },
        yAxis: {
            min: 0,
            title: {text:'Population (millions)'}
        },
        series: [{
            name: 'Population',
            data: processed_json,
            dataLabels: {
                enabled: true,
                rotation: -90,
                color: '#FFFFFF',
                align: 'right',
                format: '{point.y:.1f}', 
                y: 10,
                style: {fontSize: '13px',fontFamily: 'Verdana, sans-serif'}
            }
        }]
    });  
});

}）;

JSON数据，而不是字符串，数据尚未完成：

{"3":{"key":"PTJ1","value":3},"6":{"key":"vbnvbn","value":1}}

HighchartsJS从URL获取数据并将其传递给系列数据

1 个答案: