我创建了一个谷歌泡泡图,我正在努力重新定位标签。
我希望重新定位标签,使它们不与气泡重叠。我欢迎任何建议,以及关于如何实现这一点的任何建议。
非常感谢提前。
这是我的代码:
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawSeriesChart);
function drawSeriesChart() {
var data = google.visualization.arrayToDataTable([
['ID', 'Actionability (100)', 'Likelihood (100)', 'Megatrend', 'Impact (50)'],
['Income eqality', -40, -10, 'Megacities', 50],
['Pressure on cities', 80, 53, 'Megacities', 50],
['Rise of local gov', 70, 60, 'Megacities', 40],
['Focus on quality of life', 50, 30, 'Megacities', 40],
['Focus on education', -40, -40, 'Megacities', 33],
['City as cultural hub', -70, -27, 'Megacities', 32],
['Backlash vs erosion of values', -75, -25, 'Megacities', 40],
['Gateway drugs', -80, 50, 'Megacities', 33],
['Affordable connectivity', 75, 80, 'Connected communities', 50],
['Smart machines', 15, 63, 'Connected communities', 35],
['Mobile money standard', 70, 10, 'Connected communities', 40],
['High yielding african tech', 68, 45, 'Connected communities', 40],
['Telecoms giants', -30, 60, 'Connected communities', 40],
['Affordable access to power', 40, 40, 'Connected communities', 37],
['Drones', 25, 10, 'Connected communities', 35],
['Sharing economy', 10, 60, 'Connected communities', 38],
['Sales adopt traditional market', -90, -35, 'Connected communities', 34],
['Import substitution', -30, 35, 'The savvy consumer', 40],
['Low cost aerial cargo', 30, 35, 'The savvy consumer', 33],
['Hybrid financing', -70, 32, 'The savvy consumer', 33],
['Experience value', 40, 10, 'The savvy consumer', 35],
['Local artist influence', -20, 10, 'The savvy consumer', 35],
['Preference for young African brands', 50, 48, 'The savvy consumer', 45],
['Cut out middleman', 60, 25, 'The savvy consumer', 45],
['Manufacturing growth', 40, 75, 'Diversification drive', 45],
['SME formalisation', -20, 65, 'Diversification drive', 45],
['New business adopts formalised economics', -20, 45, 'Diversification drive', 45],
['Pressure to resist mechanisation', -60, 10, 'Diversification drive', 33],
['Greater role in backward integration', -50, 40, 'Diversification drive', 33],
['Industrialise vs protect ecosystems', -80, 60, 'Diversification drive', 40],
['Women-led business', 10, 50, 'Female first', 33],
['Women access to finance', 10, 46, 'Female first', 37],
['Dual income households rising', 60, 56, 'Female first', 33],
['Tech for women', 20, 26, 'Female first', 33],
['Greater role for women', 15, 30, 'Female first', 33],
['Target illicit financial flows', 5, 5, 'Sustainable solutions', 33],
['Impact reporting growth', 65, 40, 'Sustainable solutions', 39],
['New business models for social challenges', 45, 60, 'Sustainable solutions', 39],
['Sustainable finance models', -10, 60, 'Sustainable solutions', 33],
['Citizens voicing themselves', -80, 55, 'Sustainable solutions', 33],
['Health & education priority', 35, 55, 'Sustainable solutions', 38],
['Sustainability driven companies', 45, 52, 'Sustainable solutions', 36]
]);
var options = {
title: 'Diageo Futures - Sub-trend matrix',
hAxis: {
title: 'Actionability'
},
hAxis: {
maxValue: '120'
},
hAxis: {
textposition: 'in'
},
hAxis: {
gridlines: {
color: 'white'
}
},
theme: 'maximized',
axisTitlesPosition: 'in',
vAxis: {
title: 'Likelihood'
},
vAxis: {
maxValue: '170'
},
vAxis: {
gridlines: {
color: 'white'
}
},
bubble: {
textStyle: {
fontSize: 10,
fontName: 'arial',
auraColor: 'none'
}
}
};
var chart = new google.visualization.BubbleChart(document.getElementById('series_chart_div'));
chart.draw(data, options);
}
答案 0 :(得分:0)
没有标准选项
但是'ready'
事件触发后可以手动操作标签
请参阅以下工作代码段...
google.charts.load('current', {
callback: drawSeriesChart,
packages: ['corechart']
});
function drawSeriesChart() {
var data = google.visualization.arrayToDataTable([
['ID', 'Actionability (100)', 'Likelihood (100)', 'Megatrend', 'Impact (50)'],
['Income eqality', -40, -10, 'Megacities', 50],
['Pressure on cities', 80, 53, 'Megacities', 50],
['Rise of local gov', 70, 60, 'Megacities', 40],
['Focus on quality of life', 50, 30, 'Megacities', 40],
['Focus on education', -40, -40, 'Megacities', 33],
['City as cultural hub', -70, -27, 'Megacities', 32],
['Backlash vs erosion of values', -75, -25, 'Megacities', 40],
['Gateway drugs', -80, 50, 'Megacities', 33],
['Affordable connectivity', 75, 80, 'Connected communities', 50],
['Smart machines', 15, 63, 'Connected communities', 35],
['Mobile money standard', 70, 10, 'Connected communities', 40],
['High yielding african tech', 68, 45, 'Connected communities', 40],
['Telecoms giants', -30, 60, 'Connected communities', 40],
['Affordable access to power', 40, 40, 'Connected communities', 37],
['Drones', 25, 10, 'Connected communities', 35],
['Sharing economy', 10, 60, 'Connected communities', 38],
['Sales adopt traditional market', -90, -35, 'Connected communities', 34],
['Import substitution', -30, 35, 'The savvy consumer', 40],
['Low cost aerial cargo', 30, 35, 'The savvy consumer', 33],
['Hybrid financing', -70, 32, 'The savvy consumer', 33],
['Experience value', 40, 10, 'The savvy consumer', 35],
['Local artist influence', -20, 10, 'The savvy consumer', 35],
['Preference for young African brands', 50, 48, 'The savvy consumer', 45],
['Cut out middleman', 60, 25, 'The savvy consumer', 45],
['Manufacturing growth', 40, 75, 'Diversification drive', 45],
['SME formalisation', -20, 65, 'Diversification drive', 45],
['New business adopts formalised economics', -20, 45, 'Diversification drive', 45],
['Pressure to resist mechanisation', -60, 10, 'Diversification drive', 33],
['Greater role in backward integration', -50, 40, 'Diversification drive', 33],
['Industrialise vs protect ecosystems', -80, 60, 'Diversification drive', 40],
['Women-led business', 10, 50, 'Female first', 33],
['Women access to finance', 10, 46, 'Female first', 37],
['Dual income households rising', 60, 56, 'Female first', 33],
['Tech for women', 20, 26, 'Female first', 33],
['Greater role for women', 15, 30, 'Female first', 33],
['Target illicit financial flows', 5, 5, 'Sustainable solutions', 33],
['Impact reporting growth', 65, 40, 'Sustainable solutions', 39],
['New business models for social challenges', 45, 60, 'Sustainable solutions', 39],
['Sustainable finance models', -10, 60, 'Sustainable solutions', 33],
['Citizens voicing themselves', -80, 55, 'Sustainable solutions', 33],
['Health & education priority', 35, 55, 'Sustainable solutions', 38],
['Sustainability driven companies', 45, 52, 'Sustainable solutions', 36]
]);
var options = {
axisTitlesPosition: 'in',
bubble: {
textStyle: {
fontSize: 10,
fontName: 'Arial',
auraColor: 'none'
}
},
hAxis: {
gridlines: {
color: 'white'
},
maxValue: 120,
textposition: 'in',
title: 'Actionability'
},
height: 400,
theme: 'maximized',
title: 'Diageo Futures - Sub-trend matrix',
vAxis: {
gridlines: {
color: 'white'
},
maxValue: 170,
title: 'Likelihood'
}
};
var container = document.getElementById('series_chart_div');
var chart = new google.visualization.BubbleChart(container);
google.visualization.events.addListener(chart, 'ready', function () {
Array.prototype.forEach.call(container.getElementsByTagName('text'), function (text, index) {
if (text.getAttribute('text-anchor') === 'middle') {
var adjY = ((index % 2) === 0) ? -1 : 1;
text.setAttribute('y', parseFloat(text.getAttribute('y')) + (adjY * 8));
}
});
});
chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="series_chart_div"></div>
&#13;
另外,vAxis
&amp;的选项hAxis
应该包含在一个对象中,而不是多个(maxValue
应该是数字与字符串)...
e.g。
hAxis: {
gridlines: {
color: 'white'
},
maxValue: 120,
textposition: 'in',
title: 'Actionability'
},
VS
hAxis: {
title: 'Actionability'
},
hAxis: {
maxValue: '120'
},
hAxis: {
textposition: 'in'
},
hAxis: {
gridlines: {
color: 'white'
}
},