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

我使用谷歌图表来呈现图表，但有时标签太长，图表被切碎，有时图表太长，标签被切断，请查看jsfiddle查看。谷歌栏/柱形图设置适当的标签宽度和chartarea宽度

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);

我的问题是如何可以calc下适当的宽度，从而如果图表是大的，我可以提高整个容器的大小和停止图表和拉布勒被切断。我知道这种情况下，我可以增加图表区域，但它可能不适用于所有情况。所以它是更好的，我知道谷歌图表需要多少空间，所以我可以动态地调整容器的宽度和高度

来源

2014-01-05 Gefferey Zhang

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

查看更新后的提琴：http://jsfiddle.net/9J4sS/1/

我通过降低文本的大小来实现这一点。

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

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

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

来源

2014-01-05 12:40:40

您好，感谢您的回答，但我会还需要下载这个图表作为图像，因此，如果它被切碎，图像是不完整的，并且用户将无法看到它。此外，酒吧里的文字并不好，只是在酒吧旁边会很好，但我认为这不会是可能的 –

@GeffereyZhang然后我建议你使用将文本放入图表的方法。 –

好的，谢谢。我想我现在没有别的选择 –

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

回答

相关问题