ChartJS使ってグラフをBootstrapのTabコントロールで描く

Getting Started May 06, 2020

ChartJS

ChartJSはグラフを描くようによく使われるツールです。

  • ダウンロードサイト:ChartJS
  • デモのイメージ:
スクリーンショット 2016-09-22 20.40.55.png

ChartJS使う例:

<div class="row">
	<div class="col-md-12">
	<!-- BAR CHART -->
		<div class="box box-success">
		    <div class="box-header with-border">
			<h3 class="box-title">Bar Chart</h3>
		    </div>
		    <div class="box-body">
			<div class="chart">
				<canvas id="assignChart" style="height: 230px"></canvas>
			</div>
		    </div>
		    <!-- /.box-body -->
		</div>
		<!-- /.box -->
	</div>
</div>
var barChartCanvas = null;
	var barChart = null;
	var barChartData = {
	    labels: ["January", "February", "March", "April", "May", "June", "July"],
	    datasets: [
	    	        {
	    	          label: "Electronics",
	    	          fillColor: "rgba(210, 214, 222, 1)",
	    	          strokeColor: "rgba(210, 214, 222, 1)",
	    	          pointColor: "rgba(210, 214, 222, 1)",
	    	          pointStrokeColor: "#c1c7d1",
	    	          pointHighlightFill: "#fff",
	    	          pointHighlightStroke: "rgba(220,220,220,1)",
	    	          data: [65, 59, 80, 81, 56, 55, 40]
	    	        },
	    	        {
	    	          label: "Digital Goods",
	    	          fillColor: "rgba(60,141,188,0.9)",
	    	          strokeColor: "rgba(60,141,188,0.8)",
	    	          pointColor: "#3b8bba",
	    	          pointStrokeColor: "rgba(60,141,188,1)",
	    	          pointHighlightFill: "#fff",
	    	          pointHighlightStroke: "rgba(60,141,188,1)",
	    	          data: [28, 48, 40, 19, 86, 27, 90]
	    	        }
	    	      ]
	    };

	    barChartData.datasets[1].fillColor = "#00a65a";
	    barChartData.datasets[1].strokeColor = "#00a65a";
	    barChartData.datasets[1].pointColor = "#00a65a";
	    var barChartOptions = {	      
	      scaleBeginAtZero: true,
	      //Boolean - Whether grid lines are shown across the chart
	      scaleShowGridLines: true,
	      //String - Colour of the grid lines
	      scaleGridLineColor: "rgba(0,0,0,.05)",
	      //Number - Width of the grid lines
	      scaleGridLineWidth: 1,
	      //Boolean - Whether to show horizontal lines (except X axis)
	      scaleShowHorizontalLines: true,
	      //Boolean - Whether to show vertical lines (except Y axis)
	      scaleShowVerticalLines: true,
	      //Boolean - If there is a stroke on each bar
	      barShowStroke: true,
	      //Number - Pixel width of the bar stroke
	      barStrokeWidth: 2,
	      //Number - Spacing between each of the X value sets
	      barValueSpacing: 5,
	      //Number - Spacing between data sets within X values
	      barDatasetSpacing: 1,
	      //String - A legend template
	      legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
	      //Boolean - whether to make the chart responsive
	      responsive: true,
	      maintainAspectRatio: true
	    };
	    barChartCanvas = $("#assignChart").get(0).getContext("2d");
	    barChart = new Chart(barChartCanvas);		
	    barChartOptions.datasetFill = false;
	    barChart.Bar(barChartData, barChartOptions);

固定なデータを描く例ですので皆にはあまり面白くと感じていないと思いますが別チュートリアルでダイナミックなデータを描くのをお話しいたします。

ChartJSはBootstrapのTabコントロールで描かれないこと

一歩で以上で書いてあるコードを使ってChartJSを試したら以下のような結果を得ました

スクリーンショット 2016-09-22 21.03.54.png

他方で描かれたチャートはTabで表示することを求められましたのでHTMLパートを以下のように修正すれば表示できるようになるが思うように何も出てこなかった。

<div class="nav-tabs-custom">
	<ul class="nav nav-tabs" id="control_tabs">
		<li class="active"><a href="#tabStaffInformation" data-toggle="tab" id="lnkStaffInformation">General</a></li>
		<li><a href="#tabAssignInformation" data-toggle="tab" id="lnkAssignInformation">Assign</a></li>
	</ul>
	<div class="tab-content">
		<div class="active tab-pane" id="tabStaffInformation"
					name="tabStaffInformation">
                </div>
       <div class="tab-pane" id="tabAssignInformation" name="tabAssignInformation">
<div class="row">
		<div class="col-md-12">
		<!-- BAR CHART -->
			<div class="box box-success">
				<div class="box-header with-border">
					<h3 class="box-title">Bar Chart</h3>
				</div>
			        <div class="box-body">
					<div class="chart">
						<canvas id="assignChart" style="height: 230px"></canvas>
					</div>
				</div>
				<!-- /.box-body -->
			</div>
			<!-- /.box -->
		</div>
	</div>
</div>

あれ!!!と思ったらチャートのソースをtabAssignInformationからtabStaffInformationへ移動するとグラフが綺麗に表示されるようになりました。推理してみたらこの二つのTabの違うところはtabStaffInformationが初期化の時Activeとして指定されるだけなのです。それで表示されていないcanvasがContextを取得できないかと思われました。JSのところを以下のように修正してみたらやっぱり自分の判断は正しかったです


$('#control_tabs a').on('shown.bs.tab', function(event){
	event.preventDefault();		   	 	 
	var tabID = $(event.target).attr('id');
        /*kAssignInformation Tabはactiveとなった?*/
        if (tabID == 'lnkAssignInformation'){
       /*Tabを換えても一回のみChartのインスタンスを新規する*/
	    if(barChartCanvas==null){
		  barChartCanvas = $("#assignChart").get(0).getContext("2d");
		  barChart = new Chart(barChartCanvas);
            }
	    barChartOptions.datasetFill = false;
	    barChart.Bar(barChartData, barChartOptions);
        }
});
スクリーンショット 2016-09-22 21.50.51.png

以上です。

Tags

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.