谷歌图表工具 - 标签重叠

Question

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

- Kuba Orlik

---

将legend.position设置为'right'或增加宽度。 - vs4vijay

Answer 1

"..当人们通常抱怨标签重叠时，那是因为尝试在一个看不见的容器中绘制。我们目前不支持这个，所以您需要确保在绘制图表时，您的容器不是display:none。" - Sergey

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

- clintgh

---

谢谢！在绘制图表之前，我已经让容器可见了，现在它可以正常工作。 - Dat TT

Answer 2

我有一个图表加载在一个相当复杂的页面底部，出现了这个问题。我决定在页面加载后执行图表的创建，以便给父div时间来渲染。 $(document).ready(function(){ makeChart(data); }) 而父div的css设置了固定的高度和宽度。

希望这可以帮助你！

- Mike Wright

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函数进行渲染是有效的。

- Kiran Reddy