Question

我对药丸和morris.js图表有疑问。

我有2片“服务和每周服务”，在任何标签中我都想要1张图表。

在第一个选项卡中，图表运行良好，但在第二个选项卡中，图表未显示。

如果我运行命令resizeHandler可以正常工作，但是我希望他在没有resizeHandler（）命令的情况下显示

这是我的代码

<html>
<head>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
 </head>


<body>

<div class="container" style="padding-top: 35px;">
<ul class="nav nav-pills mb-3" id="datatypetab-tab" role="tablist"  style="text-align: center;vertical-align: middle;">
<li class="nav-item">
<a class="nav-link" id="pills-tab-numservice-tab" data-toggle="pill" href="#pills-tab-numservice" role="tab" aria-controls="pills-tab-numservice" aria-selected="false">SERVICES</a>

 </li>


 <li class="nav-item">
 <a class="nav-link" id="pills-week-numservices-tab" data-toggle="pill" href="#pills-week-numservices" role="tab" aria-controls="pills-weel-numservices" aria-selected="false" onclick="window.services_numweek.resizeHandler()">WEEK SERVICES</a>
 </li>

 </ul>

 <div class="tab-content" id="datatypetab-tabContent">




    <div class="tab-pane active" id="pills-tab-numservice" role="tabpanel" aria-labelledby="pills-tab-numservice-tab">
  <div id="nservice"></div>
  <div id="legend_numservices"></div>
 </div>




   <div class="tab-pane" id="pills-week-numservices" role="tabpanel" aria-labelledby="pills-week-numservices">
   <label class="label" style="content-align:center"></label>  
     <div id="weekservices"></div>


   </div>

   </div>
   </div>


  </body>

  <script>
 var $color_array = ['#FF6633', '#FFB399', '#FF33FF', '#FFFF99','#00B3E6', 
  '#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
  '#80B300', '#809900', '#E6B3B3', '#6680B3', '#66991A', 
  '#FF99E6', '#CCFF1A', '#FF1A66', '#E6331A', '#33FFCC',
  '#66994D', '#B366CC', '#4D8000', '#B33300', '#CC80CC',];

  var servicestot= new Morris.Bar({
  element: 'nservice',
  data: [{ y: 'service1' , a: 24.62 },{ y: 'service2' , a: 4.62 },{ y: 'service3' , a: 6.15 },{ y: 'service4' , a: 13.85 },{ y: 'service5' , a: 7.69 },{ y: 'service6' , a: 4.62 },{ y: 'service7' , a: 4.62 },{ y: 'service8' , a: 7.69 },{ y: 'service9' , a: 6.15 },{ y: 'service10' , a: 6.15 },{ y: 'service11' , a: 1.54 }],
  xkey: 'y',
  ykeys: 'a',
  //colors:$color_array,
  labels: ['SERVICE','NUMBER'],
  resize: true,
  stacked:true,
  xLabelAngle:3,

  //barColors: $color_array,
  hideHover:'false',
  lineColors:$color_array,
  barColors: function (row, series, type) {
 //console.log(row);
 //this.options.colors.push($color_array[row.x])
  return $color_array[row.x];
  },


   });



   var services_numweek= new Morris.Bar({
   element: 'weekservices',
   data: [{y:'17', service1: 1, service2: 0, service2uo: 0, service3: 1, service4:0, service5: 0, service6: 0,service7: 0,service8: 0,service9: 0,service10: 0,service11: 0,service12: 0,service13: 0,service14: 0,service15: 0}],
   xkey: 'y',
   ykeys: ['service1','service2','service2uo','service3','service4','service5','service6','service7','service8','service9','service10','service11','service12','service13','service14','service15'],
   labels: ['service1','service2','service2uo','service3','service4','service5','service6','service7','service8','service9','service10','service11','service12','service13','service14','service15'],
  resize: true,
  xLabelAngle:3,

  //barColors: $color_array,
  hideHover:'false',
  lineColors:$color_array,
  barColors: function (row, series, type) {
  //console.log(row);
  //this.options.colors.push($color_array[row.x])
  return $color_array[row.x];
  },


  })
 </script>

 </html>

我该如何解决？

谢谢

Answer 1

对此的快速解决方案是更改在选项卡上单击的图表的宽度和高度。您可以尝试一下（对于 weekservices 图表）：

$('#weekservices svg').css({width: $('#weekservices').width() });
$('#weekservices svg').css({height: $('#weekservices').height() });

Morris JS在药丸标签中未显示图表

1 个答案: