将数据从$ ajax调用传递到highcharts [英] Passing data from $ajax call to highcharts

问题描述

我有一个ajax电话

$(function () {
    $.ajax({
        url: '../../getdaily.php',
        type:'POST',
        dataType: '',
        success: function(output_string){
           console.log(output_string);
        },
        error: function (xhr, ajaxOptions, thrownError){
            console.log(xhr.statusText);
            console.log(thrownError);
        }
    });
});

和console.log将输出...

and the console.log will output...

[{"name":"Test-Cases","y":118},{"name":"White-Box","y":43},{"name":"Priority","y":44}]

我可以轻松地将其粘贴到我的data :中进行高图绘制，并像这样获得我要的饼图

I can easily paste this into my data : for highcharts and get the piechart I am looking for like so

...
series: [{
        type: 'pie',
        name: 'Browser share',
        data: [{"name":"Test-Cases","y":118},{"name":"White-Box","y":43},{"name":"Priority","y":44}]
    }]
...

我的问题是如何将output_string放入Highcharts data : <here>.我尝试了各种方法将其作为变量传入并开始逐步解决这个问题，但不确定为什么.

My question is how do I get the output_string into the Highcharts data : <here>. I have tried various ways of passing in as a variable and starting to spin out on this, not sure why.

我用于高位图表并传递给id的实际代码...

The actual code I am using for highcharts and passing into an id...

$('#container').highcharts({
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false
    },
    title: {
        text: 'Browser market shares at a specific website, 2014'
    },
    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'
                }
            }
        }
    },
    series: [{
        type: 'pie',
        name: 'Browser share',
        data: [{"name":"Test-Cases","y":118},{"name":"White-Box","y":43},{"name":"Priority","y":44}]
    }]
});

为了覆盖php文件，这是部分结尾

And to cover the php file, here is a partial of the end

...
$mysqli->real_query("SELECT priority FROM daily");
$rows2 = array();
$numb2 = 0;
$res2 = $mysqli->use_result();
$rows2['name'] = 'Priority';
while($r2 = $res2->fetch_assoc()) {
   $numb2+= $r2['priority'];
   $rows2['y'] = $numb2;
}

$result = array();
array_push($result,$rows);
array_push($result,$rows1);
array_push($result,$rows2);

echo json_encode($result);

推荐答案

只需将highcharts包装在一个函数中，将ajax响应作为函数的参数传递，并将数据(在参数中)加载到您的high charts中，如下所示: :

Just wrap your highcharts in a function, pass the ajax response as the function's argument and load the data (in argument) to your high charts, as:

function my_chart(response) {
    $('#container').highcharts({
        ...
        ...
        series: [{
            type: 'pie',
            name: 'Browser share',
            data: response
        }]
    });
}

并在ajax响应中调用您的函数，如下所示:

and call your function in ajax response, as:

    $(function () {
        $.ajax({
            url: '../../getdaily.php',
            type:'POST',
            dataType: '',
            success: function(output_string){
               //call my_chart function
               var parsed_response = jQuery.parseJSON(output_string);
               my_chart(parsed_response);
            },
            error: function (xhr, ajaxOptions, thrownError){
                console.log(xhr.statusText);
                console.log(thrownError);
            }
    });
});

这篇关于将数据从$ ajax调用传递到highcharts的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！