问题
Graph image link which is generated when hardcoding in h-axis ticks
I have to draw a line chart where I have to apply x-axis ticks dynamically. Columns in chart are as follows:
data.addColumn('number', 'Equity'); // x-axis ticks
data.addColumn('number', 'A'); //series one
data.addColumn('number', 'B'); //series two
I am adding data in rows is like given below, there can be multiple rows
which is known only at run time. So I have to insert all the rows
dynamically.
data.addRow([2, 0.8, null]);
data.addRow([3, null, 5]);
.........
.........
I have to format the h-axis ticks So When I am hardcoding h-axis as below then all the ticks are appearing:
hAxis: {
gridlines: {color: '#fff'},
ticks: [
{v:0, f: ''},
{v:1, f: 'Equity#1'},
{v:2, f: 'Equity#2'},
{v:3, f: 'Equity#3'},
{v:4, f: 'Funds Investment Value'}
]
}
But When I am assigning a array to h-axis ticks, then ticks are not appearing.
hAxis: { gridlines: {color: '#fff'}, ticks: hAxisTicksArray },
The array is having the same values as I did in hardcoding. Just for your reference I am inserting values in array as given below:
var hAxisTicksArray = [];
hAxisTicksArray.push("{v:1, f: 'Equity#1'}");
hAxisTicksArray.push("{v:2, f: 'Equity#2'}");
........
........
hAxisTicksArray::
{v:1, f: 'Equity#1'},
{v:2, f: 'Equity#2'},
{v:3, f: 'Equity#3'},
{v:4, f: 'Funds Investment Value'}
Please help me in this regard. Thanks in advance.
回答1:
i think the hover problem is due to the negative stem
try removing...
annotations: {
stem: {
length: -5
}
},
and adjusting the 'y', along with 'x'
(not sure why '23x' doesn't adjust properly)
see following working snippet...
google.charts.load('current', {
callback: function () {
drawVisualization();
window.addEventListener('resize', drawVisualization, false);
},
packages:['corechart']
});
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'PC');
data.addColumn('number', 'A');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn({ type: 'string', role: 'tooltip'});
data.addColumn({type: 'string', role: 'style'});
data.addColumn('number', 'B');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn({ type: 'string', role: 'tooltip'});
data.addColumn({type: 'string', role: 'style'});
data.addColumn('number', 'C');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn({ type: 'string', role: 'tooltip'});
data.addColumn({type: 'string', role: 'style'});
data.addRow([{v: 2, f: ''}, 0.8, '0.8x', 'PC#1, Low, 0.8x',
'point { size: 5; shape-type: square; fill-color: #DB1D40; }'
,null,null,null, null,null,null,null,null]);
data.addRow([{v: 2, f: ''}, 7.4, '7.4x', 'PC#1, High, 7.4x',
'point { size: 5; shape-type: square; fill-color: #DB1D40; }',
null,null,null, null,null,null,null,null]);
data.addRow([{v: 2, f: ''}, 12.2, '12.2x', 'PC#1, Multiple, 12.2x',
'point { size: 5; shape-type: triangle; fill-color: #DB1D40; }',
null,null,null, null,null,null,null,null]);
data.addRow([{v: 3, f: ''}, null,null,null,null,
5, '5.0x', 'PC#2, Low, 5.0x',
'point { size: 5; shape-type: square; fill-color: #DB1D40; }',
null,null,null,null]);
data.addRow([{v: 3, f: ''}, null,null,null,null,
15, '15x', 'PC#2, High, 15x',
'point { size: 5; shape-type: square; fill-color: #DB1D40; }',
null,null,null,null]);
data.addRow([{v: 3, f: ''}, null,null,null,null,
23, '23x', 'PC#2, Multiple, 23x',
'point { size: 5; shape-type: triangle; fill-color: #DB1D40;}',
null,null,null,null]);
data.addRow([{v: 1, f: ''}, null,null,null, null,null,null,null,null,
2, '2.0x', 'PC#2, Low, 2.0x',
'point { size: 5; shape-type: square; fill-color: #DB1D40; }']);
data.addRow([{v: 1, f: ''}, null,null,null,null,null,null,null,null,
7, '7x', 'PC#2, High, 7x',
'point { size: 5; shape-type: square; fill-color: #DB1D40; }']);
data.addRow([{v: 1, f: ''}, null,null,null,null,null,null,null,null,
11, '11x', 'PC#2, Multiple, 11x',
'point { size: 5; shape-type: triangle; fill-color: #DB1D40;}']);
var container = document.getElementById('visualization');
var chart = new google.visualization.ComboChart(container);
var annotations = {};
google.visualization.events.addOneTimeListener(chart, 'ready', function () {
Array.prototype.forEach.call(container.getElementsByTagName('text'), function (text, index) {
if (text.getAttribute('text-anchor') === 'middle') {
annotations[index] = {};
if(!text.innerHTML.startsWith("PC")) {
annotations[index].x = parseFloat(text.getAttribute('x')) + 20;
} else {
annotations[index].x = parseFloat(text.getAttribute('x'));
}
annotations[index].y = parseFloat(text.getAttribute('y')) + 18;
}
});
var observer = new MutationObserver(function () {
Array.prototype.forEach.call(container.getElementsByTagName('text'), function (text, index) {
if (text.getAttribute('text-anchor') === 'middle') {
text.setAttribute('x', annotations[index].x);
text.setAttribute('y', annotations[index].y);
}
});
});
observer.observe(container, {
childList: true,
subtree: true
});
});
chart.draw(data, {
legend: 'none',
colors: ['GREY'],
seriesType : 'bars',
series : {
0 : {
type : 'line',
targetAxisIndex : 0,
lineDashStyle: [3, 3]
},
1 : {
type : 'line',
targetAxisIndex : 0,
lineDashStyle: [6, 3]
},
2 : {
type : 'line',
targetAxisIndex : 0,
lineDashStyle: [6, 3]
}
},
hAxis: {
gridlines: {color: '#fff'},
ticks: [
{v: 0, f: 'PC#0'},
{v: 1, f: 'PC#1'},
{v: 2, f: 'PC#2'},
{v: 3, f: 'PC#3'},
{v: 4, f: '4'}
]
},
pointSize: 5,
dataOpacity: 1.0,
});
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="visualization"></div>回答2:
I caught the issue. I was inserting the data in h-axis ticks array as string
instead of putting that as json object. Now its working fine.
Below is the wrong way, I was doing:
hAxisTicksArray.push("{v:"+hAxisTick+", f: '"+firstColValue+"'}");
Below is the correct way, which I am doing right now and h-axis ticks are
coming properly:
hAxisTicksArray.push({v:hAxisTick, f: firstColValue});
来源：https://stackoverflow.com/questions/41464716/google-chart-formatted-dynamic-h-axis-is-not-working