javascript - 谷歌条形图/柱形图设置适当的标签宽度和图表区域宽度

Question

我正在使用google chart渲染图表，但有时标签太长导致图表被 chop ，有时图表太长以至于标签被 chop ，请检查jsfiddle看看。

google.load('visualization', '1', {packages: ['corechart']});
var graphTitle = '', dataPoints = [];

function drawVisualization() {  
    // Create and populate the data table.
    var data = google.visualization.arrayToDataTable([
        ['Option', 'Percent'],
        ['More than 75%', 47],
        ['50% to 74%', 36],
        ['30% to 49%', 10],
        ['10% to 29%', 4],
        ['Less than 10%', 3]      
    ]);

    $('body').data('quickpoll_179', data);

    // Create and draw the visualization.
    new google.visualization.BarChart(document.getElementById('quickpollChart')).
    draw(data, {
        title:'',
        titleTextStyle: {color: '#000000'},
        width:640, height:340,
        legend: {position:'none'},
        vAxis: {title: ""},
        hAxis: {title: "",format:"#'%'"},
        colors: ['#74317D'],
        chartArea: {left:80.6,top:20, width:539.4,height:"340px"}
    });
}

google.setOnLoadCallback(drawVisualization);

我的问题是如何计算适当的宽度，这样如果图表很大，我可以增加整个容器的大小并停止图表和标签被切断。我知道对于这种情况，我可以增加图表区域，但它可能不适用于所有情况。所以我最好知道谷歌图表将占用多少空间，这样我就可以动态调整容器的宽度和高度

Answer 1

我会说只是减小字体的大小，这是 Google 图表的默认行为，您无法处理所有内容，如果标签长 1000 个字符怎么办。然后你会想要椭圆，你仍然可以将鼠标悬停在标签上以查看全文。

查看更新的 fiddle :http://jsfiddle.net/9J4sS/1/

我通过减小文本的大小实现了这一点。

vAxis: {
  title: "",
  textStyle: {
    fontSize:8
  }
}

或者使用在图表中显示标签。 http://jsfiddle.net/9J4sS/2/

vAxis: {
  title: "",
  textPosition: "in"
}