AjaxのJSONデータをhighchart作成

Question

私は私がのために必要なデータとのAJAX呼び出しを統合する方法を理解していないのmysqlスクリプト

を使用して取得mysqlのデータを使用して、ページ内の簡単なグラフを作成しようとしていますチャート。私は、私の人生を楽にし、現在ハイチャートを試しているために、さまざまなチャートプラグインについて十分に知っていません。

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

マイチャートスクリプトは次のとおりです：

私のPHPスクリプトは、次のJSONを返す

$(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データが正しく

構成されている私はよく分からない100％わからないんだけど、基本的には正しく

シリーズにデータ変数を適用しまし - この上のチュートリアルを必要とするので、私は、すべてのヘルプは

おかげ

Answer 1

私はあなたがSUCから値を返すことはできませんだと思い感謝

それが働いて取得し、試すことができます代わりに関数を呼び出す必要があります。だからあなたのチャートを初期化し、あなたの機能を設定し、AJAX成功コールであなたの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); 
    } 
    }); 
}); 

Answer 2

がデータを使用してvisitorData関数を呼び出し、データ、あなたのコード例では

で機能する[1] .data（あなたのjsonがどのようにフォーマットされているか）

また、visitorData関数defが奇妙です。

vistorData = function(data) 

または

function vistorData(data) 

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