I have a bubble chart, inside are some pie charts. Right now, I am focusing on aligning the pie charts to their respective divs. The pie charts should align to the top-left corner of their divs, but instead they're aligning to the center without reacting to my top: 0px right: 0px attributes
. Here's my jsFiddle :
HTML/CSS
<div id="chart_div"></div>
.whiteHat {
border: none;
width: 100px;
position: absolute;
background-color: red;
}
JS
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawSeriesChart);
function drawSeriesChart() {
var data = google.visualization.arrayToDataTable([
['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'],
['CAN', 80.66, 1.67, 'North America', 33739900],
['DEU', 79.84, 1.36, 'Europe', 81902307],
['DNK', 78.6, 1.84, 'Europe', 5523095],
['EGY', 72.73, 2.78, 'Middle East', 79716203],
['GBR', 80.05, 2, 'Europe', 61801570],
['IRN', 72.49, 1.7, 'Middle East', 73137148],
['IRQ', 68.09, 4.77, 'Middle East', 31090763],
['ISR', 81.55, 2.96, 'Middle East', 7485600],
['RUS', 68.6, 1.54, 'Europe', 141850000],
['USA', 78.09, 2.05, 'North America', 307007000]
]);
var options = {
title: 'Correlation between life expectancy, fertility rate ' +
'and population of some world countries (2010)',
hAxis: {
title: 'Life Expectancy'
},
vAxis: {
title: 'Fertility Rate'
},
bubble: {
textStyle: {
fontSize: 11
}
}
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.BubbleChart(document.getElementById('chart_div'));
google.visualization.events.addListener(chart, 'ready', function() {
var layout = chart.getChartLayoutInterface();
for (var i = 0; i < data.getNumberOfRows(); i++) {
// add image above every fifth element
if (i % 5 == 0) {
var xPos = layout.getXLocation(data.getValue(i, 1));
var yPos = layout.getYLocation(data.getValue(i, 2));
var data2 = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var pie = document.getElementById('piechart');
var whiteHat = container.appendChild(document.createElement('div'));
whiteHat.className = 'whiteHat';
whiteHat.style.top = yPos + 'px';
whiteHat.style.left = xPos + 'px';
new google.visualization.PieChart(whiteHat).draw(data2, {
legend: {
position: 'none'
},
backgroundColor: 'transparent',
chartArea: {
top: 0,
left: 0,
width: "100%",
height: "100%"
},
});
}
}
});
chart.draw(data, options);
}
I just want to align the pie charts to the top-left corner of the div, I used a red background to show the div. How can I solve this problem?
I just added this CSS to make it look good:
.whiteHat {
left: 0 !important;
bottom: 0 !important;
width: 50% !important;
height: auto !important;
right: auto !important;
top: auto !important;
}
.whiteHat + .whiteHat {
left: auto !important;
bottom: 0 !important;
width: 50% !important;
height: auto !important;
right: 0 !important;
top: auto !important;
}
The main reason I have used !important
is to override the styles that are generated by the plugin using inline styles.
Preview
Fiddle: https://jsfiddle.net/4acLpk6L/
Oops . Top left is it? Just swap the values.
.whiteHat {
left: 0 !important;
bottom: auto !important;
width: 50% !important;
height: auto !important;
right: auto !important;
top: 0 !important;
}
.whiteHat + .whiteHat {
left: auto !important;
bottom: auto !important;
width: 50% !important;
height: auto !important;
right: 0 !important;
top: 0 !important;
}
Preview
Fiddle: https://jsfiddle.net/kmz3dka3/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.