Множественная круговая диаграмма, основанная на множественном вызове ajax

Question

Привет, я хочу, чтобы 3 круговые диаграммы были рядом друг с другом на основе разных данных. Первый график будет основан на одном вызове ajax, второй будет основан на другом вызове ajax, а третий график будет основан на третьем вызове ajax. Как мне построить такой график, используя Highchart.js любезно помощь, я новичок в этом.

Answer 1

Здесь я даю образец events опции корзины, чтобы сделать запрос ajax для данных при инициализации. Ваш вопрос, как сделать несколько диаграмм на основе нескольких запросов. Так вот я делаю два контейнера (container1 и container1) в

<div id="container1" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div> 
<div id="container2" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div> 

И инициализировать две диаграммы chart1 and chart2 в JS

$(function() { 
    var chart1 = new Highcharts.Chart({ 
     chart: { 
     renderTo: 'container1', 
      type: 'pie', 
      events: { 
      load: requestDataforChart1 
      } 
     }, 
     title: { 
      text: 'data for chart1' 
     }, 
     tooltip: { 
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
     }, 
     plotOptions: { 
      pie: { 
       allowPointSelect: true, 
       cursor: 'pointer', 
       dataLabels: { 
        enabled: true, 
        format: '<b>{point.name}</b>: {point.percentage:.1f} %', 
        style: { 
         color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' 
        } 
       } 
      } 
     }, 
     series: [{ 
     }] 
    }); 
var chart2 = new Highcharts.Chart({ 
     chart: { 
     renderTo: 'container2', 
      type: 'pie', 
      events: { 
       load: requestDataforChart2 
      } 
     }, 
     title: { 
      text: 'data for chart 2' 
     }, 
     tooltip: { 
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
     }, 
     plotOptions: { 
      pie: { 
       allowPointSelect: true, 
       cursor: 'pointer', 
       dataLabels: { 
        enabled: true, 
        format: '<b>{point.name}</b>: {point.percentage:.1f} %', 
        style: { 
         color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' 
        } 
       } 
      } 
     }, 
     series: [{ 
     }] 
    }); 

function requestDataforChart1() { 
    $.ajax({ 
     url: 'get_url.php', 
     type: "GET", 
     dataType: "json", 
     data : {chart : "pie1"}, 
     success: function(data) { 
      chart1.addSeries({ 
       name: 'Brands', 
       colorByPoint: true, 
       data: data.data_for_pie1 
      }); 
     }, 
     cache: false 
    }); 
} 
function requestDataforChart2() { 
    $.ajax({ 
     url: 'get_url.php', 
     type: "GET", 
     dataType: "json", 
     data : {chart : "pie2"}, 
     success: function(data) { 
      chart2.addSeries({ 
       name: 'Brands', 
       colorByPoint: true, 
       data: data.data_for_pie2 
      }); 
     }, 
     cache: false 
    }); 
} 
}); 

запрос Ajax Это две диаграммы делают с там events и в каждом ответе АЯКС будет добавьте данные в соответствующий график через addSeries.

Я надеюсь, что это даст некоторое представление о том, как множественный график на основе множественного запроса