Question

我正在测试Bootstrap轮播上的Jqplot图形。在旋转木马的第一张幻灯片（标题：GRAPHIC 1）中出现图形，但在第二张幻灯片（标题：GRAPHIC 2）中，不会生成图形。

我留下了源代码：

// 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,
		sliceMargin: 0,
		innerDiameter: 120,
		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{
	display: table;
}
.divToCenter .contentMiddle{
	display: table-cell;
	vertical-align: middle;
}

.device-content-top{
	border-bottom: 1px solid #cdcdcd;
	height: 300px;
}

.carousel{
	height: 299px;
}
.carousel-indicators{
	bottom: 0;
	margin-bottom: 0;
}
.carousel-indicators li{
	background-color: #c6c6de;
	border: none;
	margin: 0;
	margin-right: 5px !important;
	width: 14px;
	height: 14px;
}
.carousel-indicators li:last-child{
	margin-right: 0 !important;
}
.carousel-indicators li.active{
	background-color: #808a92;
	width: 14px;
	height: 14px;
}

/* ----------------- TYPE --------------------- */

.typeDevice div{
	display: inline-block;
}
.typeDevice  .titleType{
	font-size: 16px;
	text-align: center;
	display: block;
}

/* ------------------- GRAPHICS ------------------------ */

.chartBottom{
	overflow-y: scroll;
}
.jqplot-point-label {
	color: #0079b4;
	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>
	<div class="container-fluid">
		<div id="app">
			<div class="device-content-top row">
				<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" id="deviceContentTop">
					<!-- ONLY CAROUSEL -->
					<div id="carouselGeneric" class="carousel slide" data-ride="carousel" data-interval="5000">
						<ol class="carousel-indicators">
							<li data-target="#carouselGeneric" data-slide-to="0" class="active"></li>
							<li data-target="#carouselGeneric" data-slide-to="1"></li>
						</ol>
						<div class="carousel-inner" role="listbox">
							<div class="item active" id="slide1">
								<h2>GRAPHIC 1</h2>
								<div id="chartTopSlide1"></div>
							</div>
							<div class="item" id="slide2">
								<h2>GRAPHICS 2</h2>
								<div class="typeDevice">
									<div class="">
										<span class="titleType">TYPE 1</span>
										<div id="graphic1"></div>
									</div>
									<div class="">
										<span class="titleType">TYPE 2</span>
										<div id="graphic2"></div>
									</div>
									<div class="">
										<span class="titleType">TYPE 3</span>
										<div id="graphic3"></div>
									</div>
									<div class="">
										<span class="titleType">TYPE 4</span>
										<div id="graphic4"></div>
									</div>
									<div class="">
										<span class="titleType">TYPE 5</span>
										<div id="graphic5"></div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="device-content-bottom row">
				<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" id="deviceContentBottom">
					<h2>GRAPHIC 3</h2>
					<div id="chartBottom" class="chartBottom"></div>
				</div>
			</div>
		</div>
	</div>
	<!-- SCRIPT -->
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.pieRenderer.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.donutRenderer.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.barRenderer.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.categoryAxisRenderer.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.pointLabels.min.js"></script>
</body>
</html>

你可以帮我一把吗？或者告诉我如何解决这个问题？

提前致谢。

注意：如果更改两张幻灯片之间的图形div，则可以看到第二张幻灯片上没有图表。

Answer 1

我认为当您使用DonutRenderer时，您需要定义以下某些选项：

sliceMargin: 2,
innerDiameter: 110,
startAngle: -90

您可以通过更多选项，但我认为这些选项是必需的。

Jqplot图形未显示在Bootstrap轮播中

1 个答案: