1
부트 스트랩 캐 러셀에서 Jqplot 그래픽을 테스트하고 있습니다. 회전식 슬라이드의 첫 번째 슬라이드 (제목 : 그래픽 1)에서는 그래픽이 표시되지만 두 번째 슬라이드 (제목 : 그래픽 2)에서는 그래픽이 생성되지 않습니다.부트 스트랩 캐로 셀에 Jqplot 그래픽이 표시되지 않음
// JAVASCRIPT
$(function() {
$.jqplot.config.enablePlugins = true;
// GRAPHIC VERTICAL
var dataGraphic = [5681, 5021, 4503, 3239, 2218, 1825, 197, 8];
var nameData = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
$.jqplot('chartTopSlide1', [dataGraphic], {
grid: {
background: '#ffffff',
drawGridlines: false,
drawBorder: false,
shadow: false
},
height: 230,
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barWidth: 25,
shadowOffset: 0
},
pointLabels: {
show: true
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: nameData
},
yaxis: {
borderWidth: 0,
max: 6500,
rendererOptions: {
drawBaseline: false
},
show: false,
showTicks: false
}
},
highlighter: {
show: false
}
});
// GRAPHIC HORIZONTAL
var dataGraphic3 = [805, 905, 1905, 2905, 3905, 4905, 5251, 16496];
var nameData3 = ['MX', 'PT', 'US', 'FR', 'RU', 'IT', 'CN', 'ES'];
$.jqplot('chartBottom', [dataGraphic3], {
grid: {
background: '#ffffff',
drawBorder: false,
shadow: false
},
series: [{
renderer: $.jqplot.BarRenderer,
escapeHTML: false
}],
seriesDefaults: {
rendererOptions: {
barWidth: 25,
shadowOffset: 0,
barDirection: 'horizontal'
},
pointLabels: {
show: true
}
},
axes: {
xaxis: {
max: 18000,
borderWidth: 0,
rendererOptions: {
drawBaseline: false
},
show: false,
showTicks: false
},
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: nameData3,
pad: 50,
tickOptions: {
showGridline: false
}
}
},
highlighter: {
show: false
}
});
// GRAPHIC DONUTS
var data1 = [
[1, 78334],
[2, 37092]
];
var data2 = [
[1, 78334],
[2, 34396]
];
var data3 = [
[1, 78334],
[2, 2859]
];
var data4 = [
[1, 78334],
[2, 2366]
];
var data5 = [
[1, 78334],
[2, 2199]
];
var options = {
height: 160,
width: 160,
grid: {
background: '#ffffff',
drawBorder: false,
shadow: false
},
seriesDefaults: {
renderer: $.jqplot.DonutRenderer,
rendererOptions: {
shadowOffset: 0,
\t \t sliceMargin: 0,
\t \t innerDiameter: 120,
\t \t startAngle: -90
}
},
seriesColors: ['#e1eaef', '#216b92']
};
$.jqplot('graphic1', [data1], options);
$.jqplot('graphic2', [data2], options);
$.jqplot('graphic3', [data3], options);
$.jqplot('graphic4', [data4], options);
$.jqplot('graphic5', [data5], options);
});/* ------------ STYLE ---------------- */
h1 {
margin-bottom: 0.5em;
font-size: 5em;
}
h2 {
font-size: 18px;
font-weight: bolder;
margin-top: 10px;
}
a,
a:active,
a:focus,
a:hover,
a:visited {
color: #006a86;
text-decoration: none;
}
.divToCenter{
\t display: table;
}
.divToCenter .contentMiddle{
\t display: table-cell;
\t vertical-align: middle;
}
.device-content-top{
\t border-bottom: 1px solid #cdcdcd;
\t height: 300px;
}
.carousel{
\t height: 299px;
}
.carousel-indicators{
\t bottom: 0;
\t margin-bottom: 0;
}
.carousel-indicators li{
\t background-color: #c6c6de;
\t border: none;
\t margin: 0;
\t margin-right: 5px !important;
\t width: 14px;
\t height: 14px;
}
.carousel-indicators li:last-child{
\t margin-right: 0 !important;
}
.carousel-indicators li.active{
\t background-color: #808a92;
\t width: 14px;
\t height: 14px;
}
/* ----------------- TYPE --------------------- */
.typeDevice div{
\t display: inline-block;
}
.typeDevice .titleType{
\t font-size: 16px;
\t text-align: center;
\t display: block;
}
/* ------------------- GRAPHICS ------------------------ */
.chartBottom{
\t overflow-y: scroll;
}
.jqplot-point-label {
\t color: #0079b4;
\t font-size: 12px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GRAPHICS OF JQPLOT</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.min.css">
</head>
<body>
\t <div class="container-fluid">
\t \t <div id="app">
\t \t \t <div class="device-content-top row">
\t \t \t \t <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" id="deviceContentTop">
\t \t \t \t \t <!-- ONLY CAROUSEL -->
\t \t \t \t \t <div id="carouselGeneric" class="carousel slide" data-ride="carousel" data-interval="5000">
\t \t \t \t \t \t <ol class="carousel-indicators">
\t \t \t \t \t \t \t <li data-target="#carouselGeneric" data-slide-to="0" class="active"></li>
\t \t \t \t \t \t \t <li data-target="#carouselGeneric" data-slide-to="1"></li>
\t \t \t \t \t \t </ol>
\t \t \t \t \t \t <div class="carousel-inner" role="listbox">
\t \t \t \t \t \t \t <div class="item active" id="slide1">
\t \t \t \t \t \t \t \t <h2>GRAPHIC 1</h2>
\t \t \t \t \t \t \t \t <div id="chartTopSlide1"></div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t <div class="item" id="slide2">
\t \t \t \t \t \t \t \t <h2>GRAPHICS 2</h2>
\t \t \t \t \t \t \t \t <div class="typeDevice">
\t \t \t \t \t \t \t \t \t <div class="">
\t \t \t \t \t \t \t \t \t \t <span class="titleType">TYPE 1</span>
\t \t \t \t \t \t \t \t \t \t <div id="graphic1"></div>
\t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t <div class="">
\t \t \t \t \t \t \t \t \t \t <span class="titleType">TYPE 2</span>
\t \t \t \t \t \t \t \t \t \t <div id="graphic2"></div>
\t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t <div class="">
\t \t \t \t \t \t \t \t \t \t <span class="titleType">TYPE 3</span>
\t \t \t \t \t \t \t \t \t \t <div id="graphic3"></div>
\t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t <div class="">
\t \t \t \t \t \t \t \t \t \t <span class="titleType">TYPE 4</span>
\t \t \t \t \t \t \t \t \t \t <div id="graphic4"></div>
\t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t <div class="">
\t \t \t \t \t \t \t \t \t \t <span class="titleType">TYPE 5</span>
\t \t \t \t \t \t \t \t \t \t <div id="graphic5"></div>
\t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t </div>
\t \t \t <div class="device-content-bottom row">
\t \t \t \t <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" id="deviceContentBottom">
\t \t \t \t \t <h2>GRAPHIC 3</h2>
\t \t \t \t \t <div id="chartBottom" class="chartBottom"></div>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t </div>
\t <!-- SCRIPT -->
\t <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
\t <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
\t <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.min.js"></script>
\t <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.pieRenderer.js"></script>
\t <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.donutRenderer.min.js"></script>
\t <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.barRenderer.min.js"></script>
\t <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.categoryAxisRenderer.min.js"></script>
\t <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.pointLabels.min.js"></script>
</body>
</html>당신이 좀 도와 줄 수 :
난 당신에게 소스 코드를 남겨? 또는이 문제를 어떻게 해결할 수 있는지 말해 주시겠습니까?
미리 감사드립니다.
참고 : 두 슬라이드간에 그래프의 div를 변경하면 두 번째 슬라이드에 그래프가 나타나지 않습니다. 당신은 당신이 정의 된 다음 옵션 중 일부가 필요 DonutRenderer 사용할 때
@ code4fun 정보를 제공해 주셔서 감사합니다. – Jocari