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

ChartJS

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

• ダウンロードサイト：ChartJS
• デモのイメージ：

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を試したら以下のような結果を得ました

他方で描かれたチャートは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);
        }
});

以上です。