javascript - 使用 ajax json 数据创建 highchart

Question

我正在尝试使用通过 mysql 脚本检索的 mysql 数据在页面中创建一个简单的图表

我不明白如何将 ajax 调用与图表所需的数据集成。我对各种图表插件知之甚少，无法让我的生活变得轻松，目前正在试用 highchart。

我的 php 脚本返回以下 json:

[{"name":"golfers"},{"data":[5.7879,6.6286,6.1724,5.3125,7.1481,6.1333,4.5769]}]

我的图表脚本是:

$(function () {

visitorData(function(data) {
    console.info(data);
    $('#chart1').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Average Visitors'
        },
        xAxis: {
            categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
        },
        yAxis: {
            title: {
                text: 'Number of visitors'
            }
        },
        series: data,
    });
});
});

我的 ajax 调用函数:

$.ajax({
        url: '/visitdata',
        type: 'GET',
        async: true,
        dataType: "json",
        success: function (data) {
            console.warn(data);
            return data;

        }
    });

但目前没有显示任何内容。

我不确定如何有效地进行 ajax 调用并将其集成到图表函数中。我决定根据之前的尝试和帖子进行回调，以确保在创建图表之前返回数据 - 这一点正确吗？

我不是 100% 确定 json 数据的结构是否正确

我不确定我是否已将数据变量正确应用到系列

基本上 - 需要一个教程，这样我才能让它工作和实验

感谢所有帮助

谢谢

Answer 1

我认为您不能从成功调用中返回值，而是需要调用一个函数。因此，设置初始化图表的函数，并在 ajax 成功中使用数据调用该函数

用你的代码示例

function visitorData (data) {
   $('#chart1').highcharts({
    chart: {
        type: 'column'
    },
    title: {
        text: 'Average Visitors'
    },
    xAxis: {
        categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
    },
    yAxis: {
        title: {
            text: 'Number of visitors'
        }
    },
    series: data,
  });
}
$(document).ready(function() {
 $.ajax({
    url: '/visitdata',
    type: 'GET',
    async: true,
    dataType: "json",
    success: function (data) {
        visitorData(data);
    }
  });
 });