Question

我正在使用谷歌图表来渲染图表，但有时标签太长而图表被切断，有时图表太长以至于标签被切断，请检查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个字符，则无法使用所有内容。然后你会想要椭圆，你仍然可以将鼠标悬停在标签上以查看全文。

请参阅更新的小提琴：http://jsfiddle.net/9J4sS/1/

我通过降低文本大小来实现这一目标。

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

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

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

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

1 个答案: