英文:
How to align dynamic loaded high charts in bootstrap row
问题
I want to show charts in bootstrap row. Just 3 in one line as shown in image.
Please help me to align these dynamic charts.
我想在Bootstrap行中显示图表，就像图像中显示的那样，一行中只有3个图表。请帮助我对齐这些动态图表。
英文:
I'm using HighCharts for chart display.
I'm using chart type solidgauge .
I'm loading dynamic charts, and I want to align these charts horizontally.
Basically, I want to align charts as shown in the image below.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function getChartOptions(data) {
debugger;
var rawData = data;
var chartData = getData(rawData);
function getData(rawData) {
var data = [],
start = Math.round(Math.floor(rawData / 10) * 10);
data.push(rawData);
for (i = start; i > 0; i -= 10) {
data.push({
y: i
});
}
return data;
}
var options = {
chart: {
type: 'solidgauge',
height: 250
},
credits: {
enabled: false
},
title: {
//
},
tooltip: {
enabled: false
/*valueSuffix: ' km/h'*/
},
pane: {
startAngle: -120,
endAngle: 120,
background: [{ // Track for Move
outerRadius: '100%',
innerRadius: '80%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.3).get(),
borderWidth: 0,
shape: 'arc'
}],
},
yAxis: {
min: 0,
max: 100,
lineWidth: 2,
lineColor: 'white',
tickInterval: 10,
labels: {
enabled: false
},
minorTickWidth: 0,
tickLength: 50,
tickWidth: 5,
tickColor: 'white',
zIndex: 6,
stops: [
[0, '#f06'],
[0.101, '#f03'],
[0.201, '#e10'],
[0.301, '#c30'],
[0.401, '#a50'],
[0.501, '#870'],
[0.601, '#690'],
[0.701, '#4b0'],
[0.801, '#2d0'],
[0.901, '#0f0'],
[1, '#fff']
]
},
// other options, including series data, go here
series: [{
data: chartData,
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:12px">{y}%</span><br/>',
borderWidth: 0,
y: -20
},
tooltip: {
enabled: false
/*valueSuffix: ' km/h'*/
},
borderWidth: 0,
color: Highcharts.getOptions().colors[0],
radius: '100%',
innerRadius: '80%',
}]
};
return options;
}
/*debugger;*/
$(function () {
debugger;
// Define your data sets here
var dataSet1 = [20];
var dataSet2 = [10];
var dataSet3 = [5];
// Define an array of data sets
var dataSets = [dataSet1, dataSet2, dataSet3];
// Iterate over the data sets and create a new chart for each one
for (var i = 0; i < dataSets.length; i++) {
// Create a new container element for the chart
var $chartContainer = $('<div>').appendTo('#chart-container');
// Get the chart options for this data set
var chartOptions = getChartOptions(dataSets[i]);
// Create the chart using Highcharts
Highcharts.chart($chartContainer[0], chartOptions);
}
});
<!-- language: lang-html -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<div id="chart-container"></div>
<!-- end snippet -->
I want to show charts in bootstrap row. Just 3 in one line as shown in image.
Please help me to align these dynamic charts .
答案1
得分: 1
需要在每个图表容器中添加col类。
演示: http://jsfiddle.net/BlackLabel/h92kdmqf/ <br />
英文:
You need to add col class to each charts container.
Demo: http://jsfiddle.net/BlackLabel/h92kdmqf/ <br />
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论