Google图表工具 - 重叠标签

Question

I'm using Google Chart Tools to display a simple line graph for unknown reason the labels overlap no matter how I set the "legend" parameters. In the screenshot below you can see the result for legend: {position: 'in', alignment:'center'} . How to work around this?

Answer 1

"..when people generally complain about labels overlapping, that's due to attempting to draw in an invisible container. We currently do not support this, so you need to make sure that your container is not display:none when you draw the chart." - Sergey

Link: https://groups.google.com/forum/#!topic/google-visualization-api/c-KpZk--8p0

Answer 2

I had a chart loading near the bottom of a pretty complex page and this issue started. I decided to execute the creation of the chart after the page had loaded to give the parent div time to render. $(document).ready(function(){ makeChart(data); }) And the css for the parent div had a fixed height & width.

Hope this helps!

Answer 3

I was rendering graphs on a popup, labels were overlapping. I tried executing the rendering in $(document).ready() as well as $(window).load() - nothing worked out.

On a click event, the popup will appear.

$(document).ready(function()
{
    $('.view_graphs').click(function(){
        setTimeout(function(){
            renderGraph();
        },500)
    })
})

function renderGraph() {
    google.charts.setOnLoadCallback(column_chart);
    function column_chart() {
        var data = new google.visualization.arrayToDataTable(<?php echo $visitlang_json_data ?>); 
        var chart = new google.visualization.ColumnChart(document.getElementById('visit_lang_chart'));
        var options = {'title':'Report based on language',
                         'width':600,
                         'height':500
                     };
        chart.draw(data,options);
    }
}

Rendering it on a setTimeout function on click event worked for me