Question

我无法找到轮播中图表图表的任何示例，这些示例是理想的交互方式。

说三张幻灯片。第一张幻灯片：一侧为饼形图，另一侧为条形图。第2个和第3个相同，但是随机生成的数据不同。

有人知道该怎么做吗？甚至是简单的版本？我将非常感谢。

我已经看到了CanvasJS的示例，但是Chartist有一个示例吗？ http://jsfiddle.net/canvasjs/fz66o4L0/

HTML

$this->config->set_item('language', grab_from_db_or_session);

CSS

 <div class="item">
      <div id="chartContainer2" class="chart" style="width:100%; height:360px;"></div>
    </div>
    <div class="item">
      <div id="chartContainer3" class="chart" style="width:100%; height:360px;"></div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>
<!-- Carousel -->

JS

.carousel-control {
  position: absolute;
  top: 150px;
  left: 15px;
  width: 40px;
  height: 40px;
  //margin-top: -20px;
  font-size: 60px;
  font-weight: 100;
  line-height: 30px;
  background-image: none !important;
  filter: none !important;
  text-align: center;
  -webkit-border-radius: 23px;
     -moz-border-radius: 23px;
          border-radius: 23px;  
}

.glyphicon{
    font-size: 60px;
    color: black;
    text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
}

带有Chartist Javascript的图表轮播

0 个答案: