如何在html和servlet或jsp中创建分层饼图？

Question

我想创建一个显示百分比的分层饼图？如何在Java中使用d3创建分层饼图？

它应如下所示：http://yhnavein.github.io/d3-hierarchical-pie/

请提供使用jsp，ajax，json和servlet创建的代码。

Answer 1

if ($('#Start_date').val().length==0 ) {
         alert("Please Select Start Date"); 
     }else if($('#end_date').val().length==0){
           alert("Please Select End Date");
     }
     else{

$('#chart-container-OTAType').text();
var graphData;
var data = {
    action: "getOTATypeByDate",
    fromDate: fromDate,
    toDate: toDate
};
var dataString = 'MainJson=' + JSON.stringify(data);
$.ajax({
    type: 'POST',
    url: './OTAServlet',
    data: dataString,
    dataType: 'text',
    async: false,
    success: function (result) {
        var responseData = $.trim(result);
        graphData = JSON.parse(responseData);
        if (FusionCharts('OTAType-Pie-chart')) {
            FusionCharts('OTAType-Pie-chart').dispose();
        }
        $("#divOTATypeGraph").text('');

          var chart = new FusionCharts({    
            type: 'pie2d',
            renderAt: 'divOTATypeGraph',
            id: 'OTAType-Pie-chart',
            width: '650',
            height: '500',
            dataFormat: 'json',
            dataSource: {
                "chart": {
                    "caption": "Report for OTA",
                    "showvalues": "1",
                    "showpercentvalues": "1",
                    "showpercentintooltip": "0",
                    "bgcolor": "#FFFFFF",
                    "basefontcolor": "#400D1B",
                    "showshadow": "0",
                    "animation": "0",
                    "showborder": "0",
                    "paletteColors": '#9B609B,#AACB47,#1A9494,#BE6F71, #AACB47',
                },
                "data": graphData
            },
            "events": {
                 "dataPlotClick": function (eventObj, dataObj) {
                    var text = dataObj.categoryLabel;
                    if(text == 'OTA') {
                        otaStatus = 1;
                    } 


                    if (otaStatus > 0) {
                        getBrandStatusByDate(otaStatus);
                    }
                }
            }


        });
        chart.render();
    }