V3: Pie with legend

HTML

<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/pie.js"></script>
<div id="chartdiv" style="width: 100%; height: 362px;"></div>

JavaScript

var chart;
var legend;

var chartData = [
    {
        "country": "參與",
        "litres": 6
    },
    {
        "country": "不參與",
        "litres": 3
    },
    {
        "country": "無回應",
        "litres": 1
    },
];

AmCharts.ready(function () {
    // PIE CHART
    chart = new AmCharts.AmPieChart();
    chart.dataProvider = chartData;
    chart.titleField = "country";
    chart.valueField = "litres";
    
    // LEGEND
    legend = new AmCharts.AmLegend();
    legend.align = "center";
    legend.markerType = "circle";
    chart.balloonText = "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>";
    chart.addLegend(legend);
    
    // WRITE
    chart.write("chartdiv");
});

// changes label position (labelRadius)
function setLabelPosition() {
    if (document.getElementById("rb1").checked) {
        chart.labelRadius = 30;
        chart.labelText = "[[title]]: [[value]]";
    } else {
        chart.labelRadius = -30;
        chart.labelText = "[[percents]]%";
    }
    chart.validateNow();
}


// makes chart 2D/3D                   
function set3D() {
    if (document.getElementById("rb3").checked) {
        chart.depth3D = 10;
        chart.angle = 10;
    } else {
        chart.depth3D = 0;
        chart.angle = 0;
    }
    chart.validateNow();
}

// changes switch of the legend (x or v)
function setSwitch() {
    if (document.getElementById("rb5").checked) {
        legend.switchType = "x";
    } else {
        legend.switchType = "v";
    }
    legend.validateNow();
}