ブートストラップカルーセル内のチャートの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] 
 
    }] 
 
}; 
 

 
    
 
//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 
 
    }); 
 
    
 

 
};

<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>

私は、そのチャートがロードされないので、それはwidth:0px and height:0pxと表示さを示していない、ブートストラップカルーセル内チャートのJsに問題があります。アイブ氏は、最後の数時間後にこの事を中心に活動して、あなたたちは私を助けることができる

を願っていますこれは私の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>

チャート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 
    }); 
};

ありがとう！

出典

2016-11-02 Mollvi Aufar Mudzakir

= "line-chart-sample"を2回繰り返します。要素IDは一意である必要があります。 – raz

ええ、私のせいで、それを変えましたがまだ動作しません。何か案は？ @raz –

ブートストラップカルーセルに入っていないときに動作するかどうか確認してみましたか？問題を切り分けるために何をしましたか？ https://jsfiddle.net/のサンプルを提供することができますので、簡単に解決策を見つけることができます。 – raz

ここにコードの改訂版があります。 Chartjs 1.0.2を使用していると仮定しました。

HTML：

CHARTJS（同じHTMLだけで<div class="item"></div>空の削除）：今すぐ

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();

ブートストラップカルーセルを使用しているので、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(); 
});

は、今私がこの問題を回避作業の最良の方法であるかはわかりません。しかし、それは動作します。

UPDATE：

スライドアニメーション

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

通話機能は、一度方法をスライド完了した移行

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

ここで働く、それを参照してください：あなたは `のIDを使用している JSfiddle Demo

出典

2016-11-02 19:48:11 raz

ありがとうございました。私のために働いてくれました:) Btw、トリガーなしでチャートがロードされる可能性がありますか？なぜなら、ブートストラップカルーセルオートスライドに読み込み中のグラフが必要なのですから。 –

私は自分の答えにアップデートを加えました。それはトリックを行う必要があります;） – raz

更新フィドルhttp://jsfiddle.net/3q2xgkwa/2/ – raz

ブートストラップカルーセル内のチャートのJSを使用して

答えて

関連する問題