CSS定位多个图形 [英] CSS positioning multiple graphs
问题描述
我需要使用
Highcharts上的所有示例仅显示一个图形，我不确定如何使控件足够小以适合页面顶部或如何一次显示所有控件.
在他们的
我仍在尝试将数据格式化以显示在5个同时控件中，因此图表现在都是空的...
但是，您在上面看到的内容使用了
现在，我只需要弄清楚如何调整文本大小并填充数据.
这是一个非常简单的示例.但是我建议您深入研究
I need to display a summary report using Highcharts with 4 pie graphs and 1 bar graph.
This is a screenshot of the specs:
All of the examples on Highcharts only show a single graph, and I am not sure how to get the controls small enough to fit on the top of the page or how to show all of them at one time.
In their pie example, they have a single <div> tag called "container":
<div id="container"></div>
The javascript populates it with their call:
Highcharts.chart('container', {
Using the question below:
Show/Update Separate Bar graphs with Drilldown Pie chart of Highcharts
It looks like I need to create multiple containers for each:
- pieSubstation,
- pieFeeder,
- pieCycle,
- pieRate, and
- barCount.
<div id="pieSubstation"></div>
<div id="pieFeeder"></div>
<div id="pieCycle"></div>
<div id="pieRate"></div>
<div id="barCount"></div>
When I simply put those on the page, they show up with each below the other, and they are all large.
I am not good at positioning HTML using CSS. Once I start modifying the CSS using absolute, relative, or fixed, my webpage becomes unpredictable.
I need to position my graphs so that
- they are all at the top of the form,
- the pie charts are all in quarters on the left half, and
- the bar graph is on the right half.
How would CSS do this? Or is there another way?
UPDATE:
I am using the information provided in the 2 answers below, but the pie charts still only display one on top of the other, like shown below:
I am still trying to get the data formatted to display in 5 simultaneous controls, so the graphs are all empty ...for now!
However, what you see above uses the exact bootstrap code provided by Tch in his answer and it looked the same using the code provided by terrymorse in his answer.
Is there some reason why the Highchart graphs would not display like the specs call for?
UPDATE 2:
I don't think the javascript below will help, because the data is returned from the SQL Server stored procedure. It returns 16,000 records in our development environment that spans 2 different databases, but perhaps it will give someone an idea of how I am populating the data for the Highchart grids.
function onDataBound(e) {
var emptySpan = $('.empty-span');
emptySpan.text('');
$("#UP").toggle(false);
var tab = $('#tabstrip > ul > li.k-item.k-state-default.k-tab-on-top.k-state-active > span.k-link');
if (tab !== null) {
var tabText = tab.text();
var hashId = '#grid';
if (tabText == 'Electric') {
hashId = '#gridElectric';
} else if (tabText == 'Gas') {
hashId = '#gridGas';
} else if (tabText == 'Water') {
hashId = '#gridWater';
}
var grid = $(hashId).data('kendoGrid');
for (var i = 0; i < grid.columns.length; i++) {
grid.autoFitColumn(i);
}
var lblBarTo010 = '0 to 10';
var lblBarTo100 = '10 to 100';
var lblBarTo365 = '100 to 365';
var lblBarOver1 = 'More than 365';
var pie1 = [];
var pie2 = [];
var pie3 = [];
var pie4 = [];
var bar1 = {
lblBarTo010: 0,
lblBarTo100: 0,
lblBarTo365: 0,
lblBarOver1: 0
};
var dataSource = grid.dataSource;
$.each(grid.items(), function (index, item) {
var uid = $(item).data('uid');
var row = dataSource.getByUid(uid);
var service = row.ServiceType;
if (service == 'Electric') {
pie1.push(row);
pie2.push(row);
}
pie3.push(row);
pie4.push(row);
var days = row.Days;
if (days < 10) {
var increment = bar1[lblBarTo010] + 1
bar1[lblBarTo010] = increment;
} else if (days < 100) {
var increment = bar1[lblBarTo100] + 1
bar1[lblBarTo100] = increment;
} else if (days < 100) {
var increment = bar1[lblBarTo365] + 1
bar1[lblBarTo365] = increment;
} else {
var increment = bar1[lblBarOver1] + 1
bar1[lblBarOver1] = increment;
}
});
var charts = { // chart id, title, chart type, data[], xAxis, yAxis
1: ['piefigcontainer1', 'Meter Count per Substation (Top 10)', 'pie', pie1 ],
2: ['piefigcontainer2', 'Meter Count per Feeder (Top 10)', 'pie', pie2 ],
3: ['piefigcontainer3', 'Meter Count per Cycle (Top 10)', 'pie', pie3 ],
4: ['piefigcontainer4', 'Meter Count per Rate (Top 10)', 'pie', pie4 ],
5: ['barfigcontainer1', 'Meter Count per Gap Tier (in Days)', 'bar', bar1 ]
};
$.each(charts, function (key, value) {
var plotOptions = [];
var series = [];
console.log('creating ' + value[2] + ' graph... ');
if (value[2] == 'pie') {
plotOptions = {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}%</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
};
if (key < 3) {
series = { // donut: https://www.tutorialspoint.com/highcharts/highcharts_pie_donut.htm
name: value[1],
data: value[3],
size: '60%',
dataLabels: {
}
};
} else {
series = { // basic pie: https://www.tutorialspoint.com/highcharts/highcharts_pie_basic.htm
type: 'pie',
name: 'Meter Count',
data: value[3],
};
}
} else { // basic bar: https://www.tutorialspoint.com/highcharts/highcharts_bar_basic.htm
plotOptions = {
bar: {
dataLabels: { enabled: true, }
},
};
series = [
{
name: lblBarTo010,
data: bar1[lblBarTo010]
},
{
name: lblBarTo100,
data: bar1[lblBarTo100]
},
{
name: lblBarTo365,
data: bar1[lblBarTo365]
},
{
name: lblBarOver1,
data: bar1[lblBarOver1]
},
];
}
Highcharts.chart(value[0], {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: value[2]
},
credits: { text: '' },
title: { text: value[1] },
plotOptions: plotOptions,
series: series,
});
});
}
};
Solved!
Tch's code:
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6">
<div id="piefigcontainer1" class="mb-25 h-200"></div>
</div>
<div class="col-sm-6">
<div id="piefigcontainer2" class="h-200"></div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div id="piefigcontainer3" class="h-200"></div>
</div>
<div class="col-sm-6">
<div id="piefigcontainer4" class="h-200"></div>
</div>
</div>
</div>
<div class="col-sm-6">
<div id="barfigcontainer1" class="h-425"></div>
</div>
</div>
</div>
Now I just have to figure out how to size the text and fill the data.
this is a very simple example. but I suggest you dive into bootstrap taht has a very nice grid system stylesheet, and other useful css/js stuff
<style>
html,body {
height:100%;
width:100%;
}
.wh-50 {
width:50%;
height:50%;
float: left;
}
.wh-100 {
width:100%;
height:100%;
}
</style>
<body>
<div class="wh-50">
<div id="pieSubstation" class="wh-50"></div>
<div id="pieFeeder" class="wh-50"></div>
<div id="pieCycle" class="wh-50"></div>
<div id="pieRate" class="wh-50"></div>
</div>
<div class="wh-50">
<div id="barCount" class="wh-100"></div>
</div>
</body>
bootstrap4 version should look like this, you can ommit the height class if the charts have minimum heights
<style>
html, body {
height: 100%;
}
.h-200 {
width:100%;
min-height:200px;
}
.mb-25 {
margin-bottom:25px;
}
.h-425 {
min-height:425px;
}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6">
<div id="pieSubstation" class="mb-25 h-200"></div>
</div>
<div class="col-sm-6">
<div id="pieFeeder" class="h-200"></div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div id="pieCycle" class="h-200"></div>
</div>
<div class="col-sm-6">
<div id="pieRate" class="h-200"></div>
</div>
</div>
</div>
<div class="col-sm-6">
<div id="barCount" class="h-425"></div>
</div>
</div>
</div>
this is what I see if I put background color in every div
这篇关于CSS定位多个图形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
