使用Ajax JSON数据创建Highchart

Question

我正在尝试使用从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调用并将其集成到图表函数中。根据之前的尝试和帖子，我决定使用回调来确保在创建图表之前返回数据 - 这部分正确吗？

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

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

基本上 - 需要一个教程，以便我可以让它正常工作并进行实验

所有帮助都受到赞赏

谢谢

- Ray

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);
    }
  });
 });

- ryuutatsuo

---

我该如何实现这个功能：如果我想通过多个Ajax调用构建实时更新的图表，该怎么办？ - Kishan Mehta

我有一个关于highcharts的问题，你能帮我看一下吗？ - undefined

Answer 2

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

    $.ajax({
        url: '/visitdata',
        type: 'GET',
        async: true,
        dataType: "json",
        success: function (data) {
            visitorData(data[1].data);

        }
    });

此外，你的visitorData函数定义有些奇怪。

vistorData = function(data) 

或者

function vistorData(data)

- Barbara Laird

---

我认为@ryuutatsuo的答案是正确的——在您的情况下，作者在创建图表时也需要更改结构。 - Paweł Fus

谢谢。这是第一次尝试使用带回调的Ajax，不确定正确的方法。你的答案帮了很多忙。 - Ray

Answer 3

//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);

- Lem

---

它对我特别有用，尤其是关于如何为图表格式化数据的chartSeriesData。 - Satish

我对highcharts有一个问题，你能帮我看一下吗？ - undefined