Question

我是Stackoverflow和谷歌排行榜的新手。

我在我的一个使用谷歌图表api的项目中遇到问题，我正在绘制两个图例，但它们在预览时重叠。

我在stackoverflow和jsfiddle上尝试了各种解决方案，但没有一个能够工作。

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

图表的配置对象：

    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,
            }
        }
    };

输出： https://snag.gy/Yd2qjX.jpg

Answer 1

不幸的是，没有强制传奇的多行选项

我无法像屏幕截图那样让传说重叠，
相反，每个都将被截止，最后'...'

但唯一的方法是我可以让传奇文字掉到另一条线而不是截止，是通过一个可笑的amout增加width 需要调整chartArea.width以及

因此您可以继续调整width和chartArea.width，
直到你得到理想的结果

另一个注意事项，只要您在图表fontSize中使用options，就可以了它应该是一个数字，而不是一个字符串，即
fontSize : 8

VS。

fontSize : '8px'

请参阅以下工作代码段...

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Month', 'Tool - Long title could not read', 'Tool - Something to Prod Start'],
      [new Date('08/01/2015'), 0.2, 0.0],
      [new Date('09/01/2015'), 0.8, 0.0],
      [new Date('10/01/2015'), 1.0, 2.2],
      [new Date('11/01/2015'), 1.3, 1.2],
      [new Date('12/01/2015'), 1.8, 1.4],
      [new Date('01/01/2016'), 2.4, 1.5],
      [new Date('02/01/2016'), 2.5, 1.4],
      [new Date('03/01/2016'), 2.6, 1.5],
      [new Date('04/01/2016'), 2.5, 1.5],
      [new Date('05/01/2016'), 2.4, 1.6],
      [new Date('06/01/2016'), 2.3, 1.6],
      [new Date('07/01/2016'), 2.2, 1.5]
    ]);

    var options = {
        hAxis : {
            title : 'xAxis',
            format: 'MMM-yy',
            textStyle:{
                color: 'black',
                fontSize : 8
            },
            slantedText : true,
            slantedTextAngle : 90,
            titleTextStyle : {
                fontSize : 15,
                italic : false
            },
        },
        vAxis : {
            title : 'yAxis',
            format: '#,##0.0',
            textStyle:{
                color: 'black',
                fontSize : 8
            },
            titleTextStyle : {
                fontSize : 15,
                italic : false
            },
            viewWindowMode : 'explicit',
            viewWindow : {
                min : 0
            }
        },
        backgroundColor : 'transparent',
        interpolateNulls: false,
        width : 780,
        height : 180,
        chartArea : {
            left : 40,
            width : 310,
            height : '45%'
        },
        legend: {
            position: 'top',
            maxLines: 3
        },
        series : {
            0 : {
                color : '#154360',
                visibleInLegend : true,
                pointShape: 'square',
                pointSize: 10,
            },
            1 : {
                color : '#5499C7',
                visibleInLegend : true,
                pointShape: 'diamond',
                pointSize: 10,
            }
        }
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  },
  packages: ['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Google Charts传奇重叠

1 个答案: