Biểu đồ Hiển thị Biểu đồ Google Pie

Question

Tôi đang cố gắng sử dụng API Biểu đồ tròn của Google và có biểu đồ và chú thích xuất hiện theo chiều dọc với biểu đồ trên đỉnh và chú giải bên dưới. Tôi chỉ muốn chiều rộng biểu đồ là 300px và đã di chuyển thành công chú giải bên dưới biểu đồ. Tuy nhiên, vì chiều rộng quá nhỏ nên chú giải "cắt bỏ" và thêm các mũi tên trái/phải và # để cuộn qua các mục Chú giải.

Tôi đang cố gắng để chú thích cũng hiển thị các mục của nó theo chiều dọc trong danh sách. không phải từ trái sang phải, nhưng từ trên xuống dưới để mỗi mục có thể được nhìn thấy. Tôi không thấy bất kỳ tùy chọn cấu hình nào cho bản sửa lỗi cụ thể này trong tài liệu của họ.

Đây là mã của tôi:

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
    google.load("visualization", "1", {packages:["corechart"]}); 
    google.setOnLoadCallback(drawChart); 
    function drawChart() { 
    var data = google.visualization.arrayToDataTable([ 
     ['Task', 'Percentage'], 
     ['Trust Funds - 52.6%',  52.6], 
     ['Ed & Training - 13.6%',  13.6], 
     ['Safety, Health & Env. - 10.5%', 10.5], 
     ['Econ Dev & Infrastructure - 9.5%', 9.5], 
     ['Admin - 7.2%', 7.2], 
     ['Other - 2.2%', 2.2], 
     ['Resettlement - 2%', 2], 
     ['Matching Gifts/UW - 1.6%', 1.6], 
     ['Arts/Culture - 0.8%', 0.8] 
    ]); 


    var options = { 
     colors:['#d1ae2b','#b38849','#d8a35c','#636466','#a09f9f','#31536e','#4c7ea4','#73bfe5','#88d6f8'], 
     pieSliceText:['none'], 
     legend:{position: 'bottom'}, 
     chartArea:{left:6,top:6,width:"300px",height:"300px"} 
    }; 

    var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
    chart.draw(data, options); 
    } 
</script> 

    <div id="chart_div" style="width: 300px; height: 300px;"></div> 

Answer 1

Fiddle Link chỉ loại bỏ các huyền thoại cấu hình: {position: 'đáy'},

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <div id="chart_div" style="width: 300px; height: 300px;"></div> 

google.load("visualization", "1", {packages:["corechart"]}); 
    google.setOnLoadCallback(drawChart); 
    function drawChart() { 
    var data = google.visualization.arrayToDataTable([ 
     ['Task', 'Percentage'], 
     ['Trust Funds - 52.6%',  52.6], 
     ['Ed & Training - 13.6%',  13.6], 
     ['Safety, Health & Env. - 10.5%', 10.5], 
     ['Econ Dev & Infrastructure - 9.5%', 9.5], 
     ['Admin - 7.2%', 7.2], 
     ['Other - 2.2%', 2.2], 
     ['Resettlement - 2%', 2], 
     ['Matching Gifts/UW - 1.6%', 1.6], 
     ['Arts/Culture - 0.8%', 0.8] 
    ]); 


    var options = { 
    width:'50px', 
     colors:['#d1ae2b','#b38849','#d8a35c','#636466','#a09f9f','#31536e','#4c7ea4','#73bfe5','#88d6f8'], 
     pieSliceText:['none'], 
     chartArea:{left:1,top:6,width:"100%",height:"100px"} 
    }; 

    var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
    chart.draw(data, options); 
    }