如何避免Google折线图注解文字互相覆盖？

问题描述

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

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,'pneumonoultramicroscopicsilicovolcanoconiosis',''],[0,'QAQ',[0.1,'ABCDEFG',[1,'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>

谢谢

解决方法

感谢@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,'pneumonoultramicroscopicsilicovolcanoconiosis',null],[0,null,'QAQ'],[0.1,'ABCDEFG'],[1,'123',]);
    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>