Cách đặt chiều rộng chú thích Google Charts trong JavaScript?

Question

Tôi đang tạo Biểu đồ đường Google này bằng API Google JS. Như bạn có thể thấy, các nhãn rất hẹp. Làm thế nào để tôi làm cho nó để hiển thị toàn bộ văn bản nhãn?

Answer 1

Dưới đây là một số mẫu dựa trên google code playground line charts. Điều chỉnh tùy chọn độ rộng chartArea cho nhiều không gian hơn cho các nhãn:

new google.visualization.LineChart(document.getElementById('visualization')). 
    draw(data, {curveType: "function", 
       width: 500, height: 400, 
       vAxis: {maxValue: 10}, 
       chartArea: {width: '50%'}} 
     ); 

Nếu đó là một lựa chọn, bạn cũng có thể xác định vị trí các nhãn bên dưới bảng xếp hạng, trong đó cung cấp đáng kể thêm không gian:

new google.visualization.LineChart(document.getElementById('visualization')). 
    draw(data, {curveType: "function", 
       width: 500, height: 400, 
       vAxis: {maxValue: 10}, 
       legend: 'bottom'} 
     ); 

Answer 2

Bạn cần làm cho biểu đồ rộng hơn hoặc nhãn ngắn hơn.

Answer 3

Mở rộng tùy chọn chartArea với chiều rộng 100% đã giải quyết được vấn đề cho tôi. Trái với tài liệu, biểu đồArea bao gồm chú giải. Tôi đã sử dụng một PieChart nhưng tùy chọn tương tự có sẵn cho LineChart.

var options = {'title':title,'width':w,'height':h,'chartArea':{left:0,top:10,width:"100%"}}; 
var chart = new google.visualization.PieChart(document.getElementById(chartDiv)); 
chart.draw(data,options); 

Reference.

Answer 4

Có một tùy chọn trong legend.textStyle chúng ta có thể tùy chỉnh phong cách văn bản truyền thuyết bên trong bảng xếp hạng google

var options = { 
       legend: { textStyle: { fontSize: 78 //size of the legend 
       } } 
       } 

Answer 5

Không ai trong số các câu trả lời trước đã làm việc tốt cho tôi. Đặt chiều rộng xuống dưới 100% trung tâm khu vực ô và để lại quá nhiều khoảng trống không sử dụng ở bên trái. Đặt nó thành 100% cũng không phải là một giải pháp.

gì làm việc tốt - see live working fiddle - là thiết lập quyền giá trị để thích ứng với truyền thuyết, sau đó điều chỉnh trái giá trị cuối cùng, đối với tiêu đề trục Y và nhãn. Diện tích lô chiều rộng sẽ tự động điều chỉnh giữa hai lề cố định sau:

var options = { 
    ... 
    legend: { position: 'right' }, 
    chartArea: { 
     right: 130, // set this to adjust the legend width 
     left: 60,  // set this eventually, to adjust the left margin 
    }, 
    ... 
};