Javascript 谷歌图表图例重叠

我不熟悉Stackoverflow和google图表

我在一个使用GoogleCharts api的项目中遇到了一个问题，我画了两个图例，但它们在预览时重叠

我在stackoverflow和JSFIDLE上尝试了各种解决方案，但都不起作用

以下是我的一些代码片段和输出：

图表的配置对象：

    var options = {
        hAxis : {
            title : xAxis,
            textStyle:{
                color: 'black',
                fontSize : '8px'
            },
            slantedText : true,
            slantedTextAngle : 90,
            titleTextStyle : {
                fontSize : '15px',
                italic : false
            },
        },
        vAxis : {
            title : yAxis,
            format:format,
            textStyle:{
                color: 'black',
                fontSize : '8px'
            },
            titleTextStyle : {
                fontSize : '15px',
                italic : false
            },
            viewWindowMode : 'explicit',
            viewWindow : {
                min : 0,
                //max: 1200000
            }
        },
        backgroundColor : 'transparent',
        interpolateNulls: false,
        width : 350,
        height : 180,
        chartArea : {
            left : 40,
            width : '45%',
            height : '45%'
        },
     legend: {
          position: 'top',
            maxLines: 3,
        },
        series : {
            0 : {
                color : line1Color,
                visibleInLegend : true,
                pointShape: 'square',
                pointSize: 10,
            },
            1 : {
                color : line2Color,
                visibleInLegend : true,
                pointShape: 'diamond',
                pointSize: 10,
            }
        }
    };

输出：

---

不幸的是，图例上没有强制多行的选项

我无法让图例像屏幕截图中那样重叠，
相反，每个都将被截断，并在末尾加上“…”

但我唯一能让图例文本下降到另一行而不被截断的方法，
是通过将

宽度

增加一个数量
需要调整

图表区域。宽度

因此，您可以继续调整

宽度

和

图表区宽度

，
直到你得到想要的结果

另一个注意事项是，只要您在图表

选项
中使用
fontSize
，

它应该是一个数字，而不是字符串，即

fontSize:8

vs

fontSize:'8px'

请参阅以下工作片段


google.charts.load（'current'{
回调：函数（）{
var data=google.visualization.arrayToDataTable([
['Month'，'Tool-Long title无法读取'，'Tool-Something to Prod Start']，
[新日期（'08/01/2015'），0.2,0.0]，
[新日期（'09/01/2015'），0.8,0.0]，
[新日期（'10/01/2015'），1.0,2.2]，
[新日期（'11/01/2015'），1.3,1.2]，
[新日期（'12/01/2015'），1.8,1.4]，
[新日期（'01/01/2016'），2.4,1.5]，
[新日期（'02/01/2016'），2.5,1.4]，
[新日期（'03/01/2016'），2.6,1.5]，
[新日期（'04/01/2016'），2.5,1.5]，
[新日期（'05/01/2016'），2.4,1.6]，
[新日期（'06/01/2016'），2.3,1.6]，
[新日期（'07/01/2016'），2.2,1.5]
]);
变量选项={
哈克斯：{
标题：“xAxis”，
格式：“MMM-yy”，
文本样式：{
颜色：'黑色'，
字体大小：8
},
是的，
倾斜角度：90，
titleTextStyle：{
尺寸：15，
斜体：假
},
},
言辞：{
标题：“亚克西斯”，
格式：“#，##0.0”，
文本样式：{
颜色：'黑色'，
字体大小：8
},
titleTextStyle：{
尺寸：15，
斜体：假
},
viewWindowMode:“显式”，
视图窗口：{
最低：0
}
},
背景色：“透明”，
埃努尔斯：错，
宽度：780，
身高：180，
图表区：{
左:40,，
宽度：310，
身高：45%
},
图例：{
位置：'顶部'，
最大行数：3
},
系列：{
0 : {
颜色：“#154360”，
visibleInLegend：是的，
点形状：'正方形'，
点数：10，
},
1 : {
颜色：“#5499C7”，
visibleInLegend：是的，
点形状：“钻石”，
点数：10，
}
}
};
var chart=new google.visualization.LineChart（document.getElementById（'chart_div'））；
图表绘制（数据、选项）；
},
软件包：['corechart']
});

Thanx谢谢你的回答，但对我来说不起作用。我试图设置宽度和字体大小，但仍然重叠。这可能是内部CSS的问题。我花了好几次努力才让上面的内容起作用，在相邻的
div
中创建您自己的图例可能是值得的——是的，谢谢，我找到了