如何防止谷歌图表中的图例标签被切断答案

【问题标题】：How to prevent legend labels being cut off in Google charts如何防止谷歌图表中的图例标签被切断
【发布时间】：2013-06-03 12:26:58
【问题描述】：

使用 Perl 脚本，我一次为 20 多个系列的数据生成大量 Google Line Charts。

图例标签的形式是：一个序列号附加一个迭代的#counter。

不幸的是，从 #10 开始，这些计数器被切断了：

有没有办法阻止谷歌图表这样做？

我相当简单的图表代码如下：

    var data = { ...... };

    function drawCharts() {
            for (var csv in data) {
                    var x = new google.visualization.DataTable(data[csv]);

                    var options = {
                            title: csv,
                            width: 800,
                            height: 600
                    };

                    var chart = new google.visualization.LineChart(document.getElementById(csv));
                    chart.draw(x, options);
            }
    }

    $(function() {
            google.setOnLoadCallback(drawCharts);
    });

【问题讨论】：

您是否尝试过更改ChartArea 的选项？尝试将ChartArea.Right 设置为各种值，看看它是否仍会中断。

标签： charts legend google-visualization

【解决方案1】：

要在图表中获得完整的图例，只需添加 chartArea 的宽度和高度，如下所示

var options = {
              title: csv,
              width: 800,
              height: 600,
              chartArea: {  width: "50%", height: "70%" }
};

查看此jqfaq.com 以获取工作示例

【讨论】：

将 chartArea 选项扩展到 100% 的宽度为我解决了这个问题。与文档相反，chartArea 确实包含图例。我使用了 PieChart，但 LineChart 也可以使用相同的选项。 var options = {'title':title,'width':w,'height':h,'chartArea':{left:0,top:10,width:"100%"}}; var chart = new google.visualization.PieChart(document.getElementById(chartDiv)); chart.draw(data,options);
出于某种原因，这个 chartArea 命令对我们没有任何影响。这是我们发送它的方式。 'chartArea': {'width': '100%', 'height': '20%'} 任何其他想法都会很棒。

【解决方案2】：

在chartArea中，将宽度设为30%，将图表移至中心。

chartArea：{宽度：“30%”，高度：“50%”}

【讨论】：