diff --git a/module/common/view/chart.html.php b/module/common/view/chart.html.php
index d32ba2a614..81c379babb 100644
--- a/module/common/view/chart.html.php
+++ b/module/common/view/chart.html.php
@@ -48,6 +48,8 @@ if($config->debug)
                     data.push({label: $row.find('.chart-label').text(), value: parseInt($row.find('.chart-value').text()), color: color, id: idx});
                 });
 
+                if(data.length > 4) options.scaleLabelPlacement = 'outside';
+
                 chart = $canvas.pieChart(data, options);
                 $canvas.on('mousemove', function(e)
                 {
diff --git a/module/story/control.php b/module/story/control.php
index afcca12bae..94f31544e8 100644
--- a/module/story/control.php
+++ b/module/story/control.php
@@ -1085,7 +1085,6 @@ class story extends control
     {
         $this->loadModel('report');
         $this->view->charts   = array();
-        $this->view->renderJS = '';
 
         if(!empty($_POST))
         {
@@ -1096,11 +1095,10 @@ class story extends control
                 $chartOption = $this->lang->story->report->$chart;
                 $this->story->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->products = $this->product->getPairs();
         $this->product->setMenu($this->products, $productID);
diff --git a/module/story/js/report.js b/module/story/js/report.js
index e69de29bb2..eb436d6e5a 100644
--- a/module/story/js/report.js
+++ b/module/story/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/story/lang/en.php b/module/story/lang/en.php
index dcec7103c9..f7eb70c625 100644
--- a/module/story/lang/en.php
+++ b/module/story/lang/en.php
@@ -217,19 +217,10 @@ $lang->story->report->charts['storysPerClosedReason']   = 'Storys for reason';
 $lang->story->report->charts['storysPerChange']         = 'Story version';
 
 $lang->story->report->options = new stdclass();
-$lang->story->report->options->graph = new stdclass();
-$lang->story->report->options->swf                     = 'pie2d';
-$lang->story->report->options->width                   = 'auto';
-$lang->story->report->options->height                  = 300;
-$lang->story->report->options->graph->baseFontSize     = 12;
-$lang->story->report->options->graph->showNames        = 1;
-$lang->story->report->options->graph->formatNumber     = 1;
-$lang->story->report->options->graph->decimalPrecision = 0;
-$lang->story->report->options->graph->animation        = 0;
-$lang->story->report->options->graph->rotateNames      = 0;
-$lang->story->report->options->graph->yAxisName        = 'COUNT';
-$lang->story->report->options->graph->pieRadius        = 100;
-$lang->story->report->options->graph->showColumnShadow = 0; 
+$lang->story->report->options->graph   = new stdclass();
+$lang->story->report->options->type    = 'pie';
+$lang->story->report->options->width   = 500;
+$lang->story->report->options->height  = 140;
 
 $lang->story->report->storysPerProduct      = new stdclass();     
 $lang->story->report->storysPerModule       = new stdclass();
diff --git a/module/story/lang/zh-cn.php b/module/story/lang/zh-cn.php
index 135399d120..b642680926 100644
--- a/module/story/lang/zh-cn.php
+++ b/module/story/lang/zh-cn.php
@@ -217,21 +217,12 @@ $lang->story->report->charts['storysPerClosedReason']   = '关闭原因来进行
 $lang->story->report->charts['storysPerChange']         = '变更次数来进行统计';
 
 $lang->story->report->options = new stdclass();
-$lang->story->report->options->graph = new stdclass();
-$lang->story->report->options->swf                     = 'pie2d';
-$lang->story->report->options->width                   = 'auto';
-$lang->story->report->options->height                  = 300;
-$lang->story->report->options->graph->baseFontSize     = 12;
-$lang->story->report->options->graph->showNames        = 1;
-$lang->story->report->options->graph->formatNumber     = 1;
-$lang->story->report->options->graph->decimalPrecision = 0;
-$lang->story->report->options->graph->animation        = 0;
-$lang->story->report->options->graph->rotateNames      = 0;
-$lang->story->report->options->graph->yAxisName        = 'COUNT';
-$lang->story->report->options->graph->pieRadius        = 100; // 饼图直径。
-$lang->story->report->options->graph->showColumnShadow = 0;   // 是否显示柱状图阴影。
+$lang->story->report->options->graph   = new stdclass();
+$lang->story->report->options->type    = 'pie';
+$lang->story->report->options->width   = 500;
+$lang->story->report->options->height  = 140;
 
-$lang->story->report->storysPerProduct      = new stdclass();     
+$lang->story->report->storysPerProduct      = new stdclass();
 $lang->story->report->storysPerModule       = new stdclass();
 $lang->story->report->storysPerSource       = new stdclass();
 $lang->story->report->storysPerPlan         = new stdclass();
@@ -257,7 +248,7 @@ $lang->story->report->storysPerClosedReason->item = '原因';
 $lang->story->report->storysPerEstimate->item     = '预计工时';
 $lang->story->report->storysPerChange->item       = '变更次数';
 
-$lang->story->report->storysPerProduct->graph      = new stdclass();     
+$lang->story->report->storysPerProduct->graph      = new stdclass();
 $lang->story->report->storysPerModule->graph       = new stdclass();
 $lang->story->report->storysPerSource->graph       = new stdclass();
 $lang->story->report->storysPerPlan->graph         = new stdclass();
diff --git a/module/story/model.php b/module/story/model.php
index c95488dfd3..d703de575b 100644
--- a/module/story/model.php
+++ b/module/story/model.php
@@ -1477,7 +1477,7 @@ class storyModel extends model
         $commonOption = $this->lang->story->report->options;
 
         $chartOption->graph->caption = $this->lang->story->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/story/view/report.html.php b/module/story/view/report.html.php
index b85c8d8b74..f3c897bf34 100644
--- a/module/story/view/report.html.php
+++ b/module/story/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['story']);?></span>
@@ -43,24 +44,31 @@
         <strong><?php echo $lang->story->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'>
-            <div style="height:<?php echo $lang->story->report->options->height . 'px';?>; overflow:auto">
-              <table class='table table-condensed table-hover table-striped table-bordered'>
+        <?php foreach($charts as $chartType => $chartOption):?>
+        <tr class='text-top'>
+          <td>
+            <div class='chart-wrapper text-center'>
+              <h5><?php echo $lang->story->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'>
+            <div style="overflow:auto">
+              <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>
                   <tr>
-                    <th><?php echo $lang->story->report->$chartType->item;?></th>
+                    <th class='w-20px'></th>
+                    <th class='chart-label'><?php echo $lang->story->report->$chartType->item;?></th>
                     <th><?php echo $lang->story->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;?>
@@ -73,5 +81,4 @@
     </div>
   </div>
 </div>
-<?php echo $renderJS;?>
 <?php include '../../common/view/footer.html.php';?>
diff --git a/module/task/control.php b/module/task/control.php
index d4c068a4c1..705a15d7f8 100644
--- a/module/task/control.php
+++ b/module/task/control.php
@@ -992,7 +992,6 @@ class task extends control
         
         $this->loadModel('report');
         $this->view->charts   = array();
-        $this->view->renderJS = '';
 
         if(!empty($_POST))
         {
diff --git a/module/task/view/report.html.php b/module/task/view/report.html.php
index 1736d65122..82a3a96eec 100644
--- a/module/task/view/report.html.php
+++ b/module/task/view/report.html.php
@@ -83,5 +83,4 @@
     </div>
   </div>
 </div>
-<!-- <?php echo $renderJS;?> -->
 <?php include '../../common/view/footer.html.php';?>