使用ajax json数据创建高清
我正在尝试使用mysql脚本检索的mysql数据在页面中创建一个简单的图表
我不明白如何将ajax调用与图表所需的数据集成。 我不太了解各种图表插件，让我的生活变得轻松，目前正在试用高级图表。
我的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调用并将其集成到图表函数中。 我决定基于早期尝试和post的回调，以确保在创建图表之前返回数据 – 这一点是否正确？
我不是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成功函数中用data [1] .data调用你的visitorData函数（因为这就是你的json的格式）
$.ajax({ url: '/visitdata', type: 'GET', async: true, dataType: "json", success: function (data) { visitorData(data[1].data); } });
另外，你的visitorData函数def是奇数。
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}: {point.y}' }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', center:['60%','60%'], size:150 , dataLabels: { enabled: true, color: '#000000', distance: 40, connectorColor: '#000000', format: '{point.name}: {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);