diff --git a/module/bug/control.php b/module/bug/control.php
index e3b53f0933..cbf9ff90ed 100644
--- a/module/bug/control.php
+++ b/module/bug/control.php
@@ -178,7 +178,6 @@ class bug extends control
     {
         $this->loadModel('report');
         $this->view->charts   = array();
-        $this->view->renderJS = '';
 
         if(!empty($_POST))
         {
@@ -189,11 +188,9 @@ class bug extends control
                 $chartOption = $this->lang->bug->report->$chart;
                 $this->bug->mergeChartOption($chart);
 
-                $chartXML  = $this->report->createSingleXML($chartData, $chartOption->graph);
-                $this->view->charts[$chart] = $this->report->createJSChart($chartOption->swf, $chartXML, $chartOption->width, $chartOption->height);
+                $this->view->charts[$chart] = $chartOption;
                 $this->view->datas[$chart]  = $this->report->computePercent($chartData);
             }
-            $this->view->renderJS = $this->report->renderJsCharts(count($this->view->charts));
         }
 
         $this->bug->setMenu($this->products, $productID);
diff --git a/module/bug/js/report.js b/module/bug/js/report.js
index e69de29bb2..eb436d6e5a 100644
--- a/module/bug/js/report.js
+++ b/module/bug/js/report.js
@@ -0,0 +1,13 @@
+$(function()
+{
+    var resizeChartTable = function()
+    {
+        $('.table-wrapper').each(function()
+        {
+            var $this = $(this);
+            $this.css('max-height', $this.closest('.table').find('.chart-wrapper').outerHeight());
+        });
+    };
+    resizeChartTable();
+    $(window).resize(resizeChartTable);
+});
diff --git a/module/bug/lang/en.php b/module/bug/lang/en.php
index 24d948fd2e..5e96ca36a2 100644
--- a/module/bug/lang/en.php
+++ b/module/bug/lang/en.php
@@ -283,18 +283,9 @@ $lang->bug->report->charts['bugsPerAssignedTo']     = 'AssignedTo';
 
 $lang->bug->report->options = new stdclass();
 $lang->bug->report->options->graph = new stdclass();
-$lang->bug->report->options->swf                     = 'pie2d';
-$lang->bug->report->options->width                   = 'auto';
-$lang->bug->report->options->height                  = 300;
-$lang->bug->report->options->graph->baseFontSize     = 12;
-$lang->bug->report->options->graph->showNames        = 1;
-$lang->bug->report->options->graph->formatNumber     = 1;
-$lang->bug->report->options->graph->decimalPrecision = 0;
-$lang->bug->report->options->graph->animation        = 0;
-$lang->bug->report->options->graph->rotateNames      = 0;
-$lang->bug->report->options->graph->yAxisName        = 'COUNT';
-$lang->bug->report->options->graph->pieRadius        = 100;
-$lang->bug->report->options->graph->showColumnShadow = 0;
+$lang->bug->report->options->type   = 'pie';
+$lang->bug->report->options->width  = 500;
+$lang->bug->report->options->height = 140;
 
 $lang->bug->report->bugsPerProject        = new stdclass();
 $lang->bug->report->bugsPerBuild          = new stdclass();
@@ -336,20 +327,14 @@ $lang->bug->report->bugsPerProject->graph->xAxisName     = 'Project';
 $lang->bug->report->bugsPerBuild->graph->xAxisName       = 'Build';
 $lang->bug->report->bugsPerModule->graph->xAxisName      = 'Module';
 
-$lang->bug->report->openedBugsPerDay->swf                = 'column2d';
-$lang->bug->report->openedBugsPerDay->height             = 400;
+$lang->bug->report->openedBugsPerDay->type                = 'bar';
 $lang->bug->report->openedBugsPerDay->graph->xAxisName   = 'Date';
-$lang->bug->report->openedBugsPerDay->graph->rotateNames = 1;
 
-$lang->bug->report->resolvedBugsPerDay->swf              = 'column2d';
-$lang->bug->report->resolvedBugsPerDay->height           = 400;
+$lang->bug->report->resolvedBugsPerDay->type              = 'bar';
 $lang->bug->report->resolvedBugsPerDay->graph->xAxisName = 'Date';
-$lang->bug->report->resolvedBugsPerDay->graph->rotateNames = 1;
 
-$lang->bug->report->closedBugsPerDay->swf                = 'column2d';
-$lang->bug->report->closedBugsPerDay->height             = 400;
+$lang->bug->report->closedBugsPerDay->type                = 'bar';
 $lang->bug->report->closedBugsPerDay->graph->xAxisName   = 'Date';
-$lang->bug->report->closedBugsPerDay->graph->rotateNames = 1;
 
 $lang->bug->report->openedBugsPerUser->graph->xAxisName  = 'User';
 $lang->bug->report->resolvedBugsPerUser->graph->xAxisName= 'User';
diff --git a/module/bug/lang/zh-cn.php b/module/bug/lang/zh-cn.php
index 668af63f0f..ad1c750f12 100644
--- a/module/bug/lang/zh-cn.php
+++ b/module/bug/lang/zh-cn.php
@@ -282,19 +282,10 @@ $lang->bug->report->charts['bugsPerAssignedTo']     = '指派给统计';
 //$lang->bug->report->charts['bugHistories']       = 'Bug处理步骤统计';
 
 $lang->bug->report->options = new stdclass();
-$lang->bug->report->options->graph = new stdclass();
-$lang->bug->report->options->swf                     = 'pie2d';
-$lang->bug->report->options->width                   = 'auto';
-$lang->bug->report->options->height                  = 300;
-$lang->bug->report->options->graph->baseFontSize     = 12;
-$lang->bug->report->options->graph->showNames        = 1;
-$lang->bug->report->options->graph->formatNumber     = 1;
-$lang->bug->report->options->graph->decimalPrecision = 0;
-$lang->bug->report->options->graph->animation        = 0;
-$lang->bug->report->options->graph->rotateNames      = 0;
-$lang->bug->report->options->graph->yAxisName        = 'COUNT';
-$lang->bug->report->options->graph->pieRadius        = 100; // 饼图直径。
-$lang->bug->report->options->graph->showColumnShadow = 0;   // 是否显示柱状图阴影。
+$lang->bug->report->options->graph  = new stdclass();
+$lang->bug->report->options->type   = 'pie';
+$lang->bug->report->options->width  = 500;
+$lang->bug->report->options->height = 140;
 
 $lang->bug->report->bugsPerProject        = new stdclass();
 $lang->bug->report->bugsPerBuild          = new stdclass();
@@ -336,20 +327,14 @@ $lang->bug->report->bugsPerProject->graph->xAxisName     = '项目';
 $lang->bug->report->bugsPerBuild->graph->xAxisName       = '版本';
 $lang->bug->report->bugsPerModule->graph->xAxisName      = '模块';
 
-$lang->bug->report->openedBugsPerDay->swf                = 'column2d';
-$lang->bug->report->openedBugsPerDay->height             = 400;
+$lang->bug->report->openedBugsPerDay->type                = 'bar';
 $lang->bug->report->openedBugsPerDay->graph->xAxisName   = '日期';
-$lang->bug->report->openedBugsPerDay->graph->rotateNames = 1;
 
-$lang->bug->report->resolvedBugsPerDay->swf              = 'column2d';
-$lang->bug->report->resolvedBugsPerDay->height           = 400;
+$lang->bug->report->resolvedBugsPerDay->type              = 'bar';
 $lang->bug->report->resolvedBugsPerDay->graph->xAxisName = '日期';
-$lang->bug->report->resolvedBugsPerDay->graph->rotateNames = 1;
 
-$lang->bug->report->closedBugsPerDay->swf                = 'column2d';
-$lang->bug->report->closedBugsPerDay->height             = 400;
+$lang->bug->report->closedBugsPerDay->type                = 'bar';
 $lang->bug->report->closedBugsPerDay->graph->xAxisName   = '日期';
-$lang->bug->report->closedBugsPerDay->graph->rotateNames = 1;
 
 $lang->bug->report->openedBugsPerUser->graph->xAxisName  = '用户';
 $lang->bug->report->resolvedBugsPerUser->graph->xAxisName= '用户';
diff --git a/module/bug/model.php b/module/bug/model.php
index 20e587fbc3..88df516bfd 100644
--- a/module/bug/model.php
+++ b/module/bug/model.php
@@ -1182,7 +1182,7 @@ class bugModel extends model
         $commonOption = $this->lang->bug->report->options;
 
         $chartOption->graph->caption = $this->lang->bug->report->charts[$chartType];
-        if(!isset($chartOption->swf))    $chartOption->swf    = $commonOption->swf;
+        if(!isset($chartOption->type))    $chartOption->type    = $commonOption->type;
         if(!isset($chartOption->width))  $chartOption->width  = $commonOption->width;
         if(!isset($chartOption->height)) $chartOption->height = $commonOption->height;
 
diff --git a/module/bug/view/report.html.php b/module/bug/view/report.html.php
index 0024e5982c..fa0ceba044 100644
--- a/module/bug/view/report.html.php
+++ b/module/bug/view/report.html.php
@@ -11,6 +11,7 @@
  */
 ?>
 <?php include '../../common/view/header.html.php';?>
+<?php include '../../common/view/chart.html.php';?>
 <div id='titlebar'>
   <div class='heading'>
     <span class='prefix'><?php echo html::icon($lang->icons['bug']);?></span>
@@ -43,25 +44,32 @@
         <strong><?php echo $lang->bug->report->common;?></strong>
       </div>
       <table class='table active-disabled'>
-        <?php foreach($charts as $chartType => $chartContent):?>
-        <tr valign='top'>
-          <td><?php echo $chartContent;?></td>
-          <td width='300'>
+        <?php foreach($charts as $chartType => $chartOption):?>
+        <tr class='text-top'>
+          <td>
+            <div class='chart-wrapper text-center'>
+              <h5><?php echo $lang->bug->report->charts[$chartType];?></h5>
+              <div class='chart-canvas'><canvas id='chart-<?php echo $chartType ?>' width='<?php echo $chartOption->width;?>' height='<?php echo $chartOption->height;?>' data-responsive='true'></canvas></div>
+            </div>
+          </td>
+          <td style='width: 320px'>
             <?php $height = zget($lang->bug->report->$chartType, 'height', $lang->bug->report->options->height) . 'px'; ?>
-            <div style="height:<?php echo $height;?>; overflow:auto">
-              <table class='table table-condensed table-hover table-striped table-bordered'>
+            <div style="overflow:auto" class='table-wrapper'>
+              <table class='table table-condensed table-hover table-striped table-bordered table-chart' data-chart='<?php echo $chartOption->type; ?>' data-target='#chart-<?php echo $chartType ?>' data-animation='false'>
                 <caption><?php echo $lang->bug->report->charts[$chartType];?></caption>
                 <thead>
                   <tr>
-                    <th><?php echo $lang->report->item;?></th>
+                    <th class='w-20px'></th>
+                    <th class='chart-label'><?php echo $lang->report->item;?></th>
                     <th><?php echo $lang->report->value;?></th>
                     <th><?php echo $lang->report->percent;?></th>
                   </tr>
                 </thead>
                 <?php foreach($datas[$chartType] as $key => $data):?>
                 <tr class='text-center'>
-                  <td><?php echo $data->name;?></td>
-                  <td><?php echo $data->value;?></td>
+                  <td class='chart-color'><i class='chart-color-dot icon-circle'></i></td>
+                  <td class='chart-label'><?php echo $data->name;?></td>
+                  <td class='chart-value'><?php echo $data->value;?></td>
                   <td><?php echo ($data->percent * 100) . '%';?></td>
                 </tr>
                 <?php endforeach;?>
@@ -74,5 +82,4 @@
     </div>
   </div>
 </div>
-<?php echo $renderJS;?>
 <?php include '../../common/view/footer.html.php';?>
diff --git a/module/story/view/report.html.php b/module/story/view/report.html.php
index f3c897bf34..e3010bbeb3 100644
--- a/module/story/view/report.html.php
+++ b/module/story/view/report.html.php
@@ -53,7 +53,7 @@
             </div>
           </td>
           <td style='width: 320px'>
-            <div style="overflow:auto">
+            <div style="overflow:auto;" class='table-wrapper'>
               <table class='table table-condensed table-hover table-striped table-bordered table-chart' data-chart='<?php echo $chartOption->type; ?>' data-target='#chart-<?php echo $chartType ?>' data-animation='false'>
                 <caption class='text-left'><?php echo $lang->story->report->charts[$chartType];?></caption>
                 <thead>