Javascript 使用ajax json数据创建highchart

我正在尝试使用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数据的结构是否正确

我不确定我是谁；我已将数据变量正确应用于序列

基本上-需要一个教程，这样我就可以得到它的工作和实验

感谢您的帮助

---

谢谢

我认为您不能从成功调用返回值，而是需要调用函数。因此，设置初始化图表的函数，并在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);
    }
  });
 });

---

在ajax成功函数中，使用数据[1].data调用visitorData函数（因为json就是这样格式化的）

此外，visitorData函数def也很奇怪

vistorData = function(data) 

或

//解析json响应
var chartSeriesData=[]；
var chartCategory=[]；
$.each（响应，函数（）{
if（this.name！=“TOTAL”&this.no！=“0”）{
var series_name=this.name；
var系列_数据=此编号；
变量系列=[
系列名称，
parseFloat（系列_数据）
];
图表系列数据推送（系列）；
}
});
//初始化highchart的选项
变量选项={
图表：{
plotBackgroundColor:null，
plotBorderWidth:null，
plotShadow:false
},
标题：{
文本：“销售订单”
},
工具提示：{
pointFormat:“{series.name}：{point.y}”
},
打印选项：{
馅饼：{
allowPointSelect:true，
光标：“指针”，
中心：['60%，'60%']，
尺码：150
,
数据标签：{
启用：对，
颜色：'#000000'，
距离：40，
连接器颜色：'#000000'，
格式：'{point.name}:{point.y}'
}
}
},
系列：[{
键入“pie”，
名称：“浏览器共享”，
data:chartSeriesData//load从json创建的数组
}]
}
//options.series[0].setData（datavaluejson）；
var图表=$（“#容器”）。高图（选项）；

我认为@ryuutatsuo的答案是正确的-在您的情况下，作者在创建图表时也需要更改结构。谢谢。这是第一次尝试将ajax与回调一起使用，但并不确定正确的方法。您的回答帮助我实现了这一点：如果我想通过多个ajax调用构建实时更新图表，该怎么办？它专门为我提供了如何为图表系列数据格式化数据的方法

vistorData = function(data) 

function vistorData(data)

//parse json response
var chartSeriesData = [];
var chartCategory = [];

$.each(response, function() {

  if(this.name!="TOTAL" && this.no!="0") {

    var series_name = this.name;
    var series_data = this.no;

    var series = [
      series_name,
      parseFloat(series_data)
    ];
    chartSeriesData.push(series);   
  }
});

//initialize options for highchart
var options = {
  chart: {
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false
  },
  title: {
    text: 'SalesOrder '
  },
  tooltip: {
    pointFormat: '{series.name}: <b>{point.y}</b>'
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      center:['60%','60%'],
      size:150
      ,
      dataLabels: {
        enabled: true,
        color: '#000000',
        distance: 40,
        connectorColor: '#000000',
        format: '<b>{point.name}</b>: {point.y} '
      }
    }
  },
  series: [{
    type: 'pie',
    name: 'Browser share',
    data:chartSeriesData //load array created from json
  }]
}

//options.series[0].setData(datavaluejson);
var chart= $('#container').highcharts(options);