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>

并在js中初始化两个图表chart1 and chart2

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

这两个图表使用events生成ajax请求，并且在每个ajax响应中都会通过addSeries向相应的图表添加数据。

我希望这会让我们知道如何基于多个请求的多个图表

基于多个ajax调用的多个饼图

1 个答案: