javascript – Google Charts传奇重叠

2019-07-11 08:36:09 阅读：144 来源： 互联网

标签：javascript charts google-visualization

我是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

解决方法:

遗憾的是,没有强制在图例上强行显示多行的选项

我无法像屏幕截图那样让传说重叠,
相反,每一个都会被切断,最后会有’…’

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

所以你可以继续调整宽度和chartArea.width,
直到你得到理想的结果

另外一点,任何时候你在图表选项中使用fontSize,
它应该是一个数字,而不是一个字符串,即
fontSize：8

与

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>

标签：javascript,charts,google-visualization
来源： https://codeday.me/bug/20190711/1430222.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – Google Charts传奇重叠