如何避免google折线图标注文字相互覆盖？答案

【问题标题】：How to avoid google line chart annotation text cover each other?如何避免google折线图标注文字相互覆盖？
【发布时间】：2020-08-18 08:22:57
【问题描述】：

我创建了一个带有注释的水平折线图，但是当两点太靠近时，注释文本会相互覆盖，如何避免注释相互覆盖？这是我的示例图表：

google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawLogScales);
function drawLogScales() {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'X');
    data.addColumn('number', 'Y');
    data.addColumn({type:'string', role:'annotation'});
    data.addColumn({type:'string', role:'style'});
    data.addRows([
        [0, 0,'pneumonoultramicroscopicsilicovolcanoconiosis',''],
        [0, 0,'QAQ',''],    
        [0.1, 0,'ABCDEFG',''],  
        [1, 0,'123',''],     
    ]);
    var options = {};
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}

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

谢谢

【问题讨论】：

在工具提示中显示注释文本
@priya_singh 谢谢，但我需要直接显示文本，是否可以为每个点设置 annotations.datum.stem.length？
您只能更改整个系列/数据表列的词干长度。唯一的选择是通过更改<text> 元素上的"y" 属性来手动调整图表的就绪事件...
@WhiteHat 谢谢，我明白了！
干杯！很好的解决方案...

标签： javascript html jquery google-visualization google-chat

【解决方案1】：

感谢@WhiteHat 的建议，最后我发现我可以创建一个空系列并显示注释：

google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawLogScales);
function drawLogScales() {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'X');
    data.addColumn('number', 'Y');
    data.addColumn({type:'string', role:'annotation'});
    data.addColumn('number', 'Z');
    data.addColumn({type:'string', role:'annotation'});
    data.addRows([
        [0, 0,'pneumonoultramicroscopicsilicovolcanoconiosis',0,null],
        [0, 0,null,0,'QAQ'],    
        [0.1,0,null,0,'ABCDEFG'],  
        [1, 0,'123',0,null],     
    ]);
    var options = {series: {1: {color: '#3366CC',annotations: {stem: {color: '#3366CC',length :30,},},lineWidth: 0,pointSize: 0,},},};
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}

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

【讨论】：