I create a horizontal line chart with annotation,but annotation text will cover each other when two point too close,how can I avoid annotation cover each other?? here is my sample chart:
JavaScript
x
18
18
1
google.charts.load('current', {packages: ['corechart', 'line']});
2
google.charts.setOnLoadCallback(drawLogScales);
3
function drawLogScales() {
4
var data = new google.visualization.DataTable();
5
data.addColumn('number', 'X');
6
data.addColumn('number', 'Y');
7
data.addColumn({type:'string', role:'annotation'});
8
data.addColumn({type:'string', role:'style'});
9
data.addRows([
10
[0, 0,'pneumonoultramicroscopicsilicovolcanoconiosis',''],
11
[0, 0,'QAQ',''],
12
[0.1, 0,'ABCDEFG',''],
13
[1, 0,'123',''],
14
]);
15
var options = {};
16
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
17
chart.draw(data, options);
18
}
JavaScript
1
2
1
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
2
<div id="chart_div"></div>
thank you
Advertisement
Answer
thanks for @WhiteHat advice, finally i found i can create an empty series and shows the annotations:
JavaScript
1
19
19
1
google.charts.load('current', {packages: ['corechart', 'line']});
2
google.charts.setOnLoadCallback(drawLogScales);
3
function drawLogScales() {
4
var data = new google.visualization.DataTable();
5
data.addColumn('number', 'X');
6
data.addColumn('number', 'Y');
7
data.addColumn({type:'string', role:'annotation'});
8
data.addColumn('number', 'Z');
9
data.addColumn({type:'string', role:'annotation'});
10
data.addRows([
11
[0, 0,'pneumonoultramicroscopicsilicovolcanoconiosis',0,null],
12
[0, 0,null,0,'QAQ'],
13
[0.1,0,null,0,'ABCDEFG'],
14
[1, 0,'123',0,null],
15
]);
16
var options = {series: {1: {color: '#3366CC',annotations: {stem: {color: '#3366CC',length :30,},},lineWidth: 0,pointSize: 0,},},};
17
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
18
chart.draw(data, options);
19
}
JavaScript
1
2
1
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
2
<div id="chart_div"></div>