Google图表工具 - 重叠标签

Question

我正在使用谷歌图表工具显示一个简单的折线图，原因不明，无论我如何设置“图例”参数，标签都会重叠。在下面的屏幕截图中，您可以看到legend: {position: 'in', alignment:'center'}的结果。如何解决这个问题？

Answer 1

  

＆＃34; ..当人们普遍抱怨标签重叠时，由于试图在一个看不见的容器中画画。我们目前不支持这一点，因此您需要确保在绘制图表时您的容器不显示：none。＆＃34; - 谢尔盖

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

Answer 2

我在一个相当复杂的页面底部附近加载了一个图表，这个问题就开始了。我决定在页面加载后执行图表的创建，以便为父div提供渲染时间。 $(document).ready(function(){ makeChart(data); }) 并且父div的css具有固定的高度＆amp;宽度。

希望这有帮助！

Answer 3

我当时在弹出窗口上渲染图形，标签重叠。我尝试在$(document).ready()和$(window).load()中执行渲染-没有任何结果。

在单击事件中，将显示弹出窗口。

$(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);
    }
}

在点击事件上通过setTimeout函数进行渲染对我来说很有效