我正在尝试使用使用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); } }); });