在Bootstrap Carousel中使用图表js

时间：2016-11-02 17:39:25

标签： javascript jquery html twitter-bootstrap bootstrap-carousel

＆＃13;
＆＃13; 
 //Sampel Line Chart 
 var LineChartSampleData = {
  labels: ["Q1", "Q2", "Q3", "Q4", "Q5", "Q6","Q7"],
  datasets: [{
   label: "Sales 1",
   fillColor: "transparent",
   strokeColor: "rgba(220,220,220,1)",
   pointColor: "rgba(220,220,220,1)",
   pointStrokeColor: "#fff",
   pointHighlightFill: "#fff",
   pointHighlightStroke: "rgba(220,220,220,1)",
   data: [11, 12, 13, 14, 15, 16, 17]
  }, {
   label: "Sales 5",
   fillColor: "transparent",
   strokeColor: "rgba(236, 80, 80,1)",
   pointColor: "rgba(236, 80, 80,1)",
   pointStrokeColor: "#fff",
   pointHighlightFill: "#fff",
   pointHighlightStroke: "rgba(236, 80, 80,1)",
   data: [15, 21, 35, 42, 33, 33, 81]
  }]
 };

 
 //Sampel Bar Chart
 var BarChartSampleData = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.5)",
            strokeColor: "rgba(220,220,220,0.8)",
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        },
        {
            label: "My Second dataset",
            fillColor: "rgba(151,187,205,0.5)",
            strokeColor: "rgba(151,187,205,0.8)",
            highlightFill: "rgba(151,187,205,0.75)",
            highlightStroke: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 86, 27, 90]
        }
    ]
};


//Sampel Radar Chart
var RadarChartSampleData = {
    labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 90, 81, 56, 55, 40]
        },
        {
            label: "My Second dataset",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 96, 27, 100]
        }
    ]
};

//Sampel Polor Chart
var PolarChartSampleData = [
    {
        value: 300,
        color:"#F7464A",
        highlight: "#FF5A5E",
        label: "Red"
    },
    {
        value: 50,
        color: "#46BFBD",
        highlight: "#5AD3D1",
        label: "Green"
    },
    {
        value: 100,
        color: "#FDB45C",
        highlight: "#FFC870",
        label: "Yellow"
    },
    {
        value: 40,
        color: "#949FB1",
        highlight: "#A8B3C5",
        label: "Grey"
    },
    {
        value: 120,
        color: "#4D5360",
        highlight: "#616774",
        label: "Dark Grey"
    }

];

//Sampel Pie Doughnut Chart
var PieDoughnutChartSampleData = [
    {
        value: 300,
        color:"#F7464A",
        highlight: "#FF5A5E",
        label: "Red"
    },
    {
        value: 50,
        color: "#46BFBD",
        highlight: "#5AD3D1",
        label: "Green"
    },
    {
        value: 100,
        color: "#FDB45C",
        highlight: "#FFC870",
        label: "Yellow"
    }
]

 window.onload = function() {

  window.LineChartSample = new Chart(document.getElementById("line-chart-sample").getContext("2d")).Line(LineChartSampleData,{
   responsive:true
  });
  
  window.BarChartSample = new Chart(document.getElementById("bar-chart-sample").getContext("2d")).Bar(BarChartSampleData,{
   responsive:true
  });
  
  window.RadarChartSample = new Chart(document.getElementById("radar-chart-sample").getContext("2d")).Radar(RadarChartSampleData,{
   responsive:true
  });
  
  window.PolarChartSample = new Chart(document.getElementById("polar-chart-sample").getContext("2d")).PolarArea(PolarChartSampleData,{
   responsive:true
  });
  
  window.PieChartSample = new Chart(document.getElementById("pie-chart-sample").getContext("2d")).Pie(PieDoughnutChartSampleData,{
   responsive:true
  });
  window.DoughnutChartSample = new Chart(document.getElementById("doughnut-chart-sample").getContext("2d")).Pie(PieDoughnutChartSampleData,{
   responsive:true
  });
  

 };
＆＃13; 
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<div id="myCarousel" class="carousel slide myCarousel" data-interval="false" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol> 
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item item1">
      <canvas id="bar-chart-sample" height="80"></canvas>
      <ul class="doughnut-chart-legend">
         <li class="mobile ultra-small"><span class="legend-color"></span>Mobile</li>
         <li class="kitchen ultra-small"><span class="legend-color"></span> Kitchen</li>
         <li class="home ultra-small"><span class="legend-color"></span> Home</li>
     </ul>
    </div>
    <div class="item item2">
    <canvas id="line-chart-sample" height="80"></canvas>
    </div>
    <div class="item">
    <canvas id="line-chart-sample" height="80"></canvas>
    </div>
  </div>
  <hr class="transition-timer-carousel-progress-bar" />
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
＆＃13;
＆＃13;
＆＃13;

我在Bootstrap Carousel中遇到Chart Js的问题，因为图表没有加载而没有显示，它显示为width:0px and height:0px。我最近几个小时一直在努力解决这个问题，希望你们能帮帮我

这是我的Html：

 <div id="myCarousel" class="carousel slide myCarousel" data-interval="false" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol> 
      <!-- Carousel items -->
      <div class="carousel-inner">
        <div class="active item item1">
          <canvas id="bar-chart-sample" height="80"></canvas>
          <ul class="doughnut-chart-legend">
             <li class="mobile ultra-small"><span class="legend-color"></span>Mobile</li>
             <li class="kitchen ultra-small"><span class="legend-color"></span> Kitchen</li>
             <li class="home ultra-small"><span class="legend-color"></span> Home</li>
         </ul>
        </div>
        <div class="item item2">
        <canvas id="line-chart-sample" height="80"></canvas>
        </div>
        <div class="item">
        </div>
      </div>
      <hr class="transition-timer-carousel-progress-bar" />
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>

Chart JS：

      //Sampel Line Chart 
         var LineChartSampleData = {
          labels: ["Q1", "Q2", "Q3", "Q4", "Q5", "Q6","Q7"],
          datasets: [{
           label: "Sales 1",
           fillColor: "transparent",
           strokeColor: "rgba(220,220,220,1)",
           pointColor: "rgba(220,220,220,1)",
           pointStrokeColor: "#fff",
           pointHighlightFill: "#fff",
           pointHighlightStroke: "rgba(220,220,220,1)",
           data: [11, 12, 13, 14, 15, 16, 17]
          }, {
           label: "Sales 5",
           fillColor: "transparent",
           strokeColor: "rgba(236, 80, 80,1)",
           pointColor: "rgba(236, 80, 80,1)",
           pointStrokeColor: "#fff",
           pointHighlightFill: "#fff",
           pointHighlightStroke: "rgba(236, 80, 80,1)",
           data: [15, 21, 35, 42, 33, 33, 81]
          }]
         };


     var BarChartSampleData = {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [
            {
                label: "My First dataset",
                fillColor: "rgba(220,220,220,0.5)",
                strokeColor: "rgba(220,220,220,0.8)",
                highlightFill: "rgba(220,220,220,0.75)",
                highlightStroke: "rgba(220,220,220,1)",
                data: [65, 59, 80, 81, 56, 55, 40]
            },
            {
                label: "My Second dataset",
                fillColor: "rgba(151,187,205,0.5)",
                strokeColor: "rgba(151,187,205,0.8)",
                highlightFill: "rgba(151,187,205,0.75)",
                highlightStroke: "rgba(151,187,205,1)",
                data: [28, 48, 40, 19, 86, 27, 90]
            }
        ]
    };

 window.onload = function() {

  window.LineChartSample = new Chart(document.getElementById("line-chart-sample").getContext("2d")).Line(LineChartSampleData,{
   responsive:true
  });

  window.BarChartSample = new Chart(document.getElementById("bar-chart-sample").getContext("2d")).Bar(BarChartSampleData,{
   responsive:true
  });
 };

谢谢你的帮助，干杯！

1 个答案:

答案 0 :(得分：1)

这是您的代码的修订版本。我以为你正在使用Chartjs 1.0.2。

HTML :(同样的html刚删除空<div class="item"></div>）

CHARTJS：

function generateChart() {

    var LineChartCanvas = $("#line-chart-sample").get(0).getContext("2d");
    var LineChartSample = new Chart(LineChartCanvas);

    var LineChartSampleData = {
    labels: ["Q1", "Q2", "Q3", "Q4", "Q5", "Q6","Q7"],
    datasets: [
        {
        label: "Sales 1",
        fillColor: "transparent",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [11, 12, 13, 14, 15, 16, 17]
        }, 
        {
        label: "Sales 5",
        fillColor: "transparent",
        strokeColor: "rgba(236, 80, 80,1)",
        pointColor: "rgba(236, 80, 80,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(236, 80, 80,1)",
        data: [15, 21, 35, 42, 33, 33, 81]
        }
        ]
    };
    LineChartSample.Line(LineChartSampleData);

    //Bar Chart Sample        
    var BarChartCanvas = $("#bar-chart-sample").get(0).getContext("2d");
    var BarChartSample = new Chart(BarChartCanvas);

    var BarChartSampleData = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
            {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.5)",
            strokeColor: "rgba(220,220,220,0.8)",
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
            },
            {
            label: "My Second dataset",
            fillColor: "rgba(151,187,205,0.5)",
            strokeColor: "rgba(151,187,205,0.8)",
            highlightFill: "rgba(151,187,205,0.75)",
            highlightStroke: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 86, 27, 90]
            }
        ]
    };
    BarChartSample.Bar(BarChartSampleData);
};
generateChart();

现在，由于您使用的是bootstrap轮播，因此仅显示具有active类的项目。 Chartjs无法为隐藏的画布元素生成图表。

一旦触发事件，就可以生成图表。

像这样：

function resetChart() {
    //Reset chart data 
    $('canvas').remove();
    $('.item2').prepend('<canvas id="line-chart-sample" height="80"></canvas>');
    $('.item1').prepend('<canvas id="bar-chart-sample" height="80"></canvas>');

    generateChart();
}

$(document).on('click', '.carousel-control', function () {
    resetChart();
});

现在我不确定这是否是解决此问题的最佳方法。但它确实有效。

更新：

幻灯片动画

$('#myCarousel').carousel({
    interval: 2000,
    cycle: true
});

一旦幻灯片方法完成转换，就调用函数

$('#myCarousel').on('slid.bs.carousel', function () {
    resetChart();
})

看到它在这里工作： JSfiddle Demo

相关问题
最新问题