morris.js圖表​​

Question

我與morris.js圖表​​掙扎的jQuery選項卡中：

http://morrisjs.github.io/morris.js/

http://jqueryui.com/tabs/#default

第一張圖顯示正常，但其他選項卡只顯示morris-懸停：

。

編輯:(不知道爲什麼這停止工作 - 正在工作和圖片仍然生活）。

控制檯沒有錯誤。我不是最大的js，但非常確定所有的圖表代碼都很好，因爲圖表顯示何時從標籤中刪除。

標籤代碼與文本一起工作看起來很好。

我已經看到了點綴使用重繪（）來解決這個問題的一些提到，但不知道如何和任何jsfiddles，我發現脫機或不工作。像this one。

如果有人可以給我一些指導，將不勝感激！

HTML：

 <div id="tabs"> 
         <div id="tabs-1" class="statdiv"> 
      <h4>Tab</h4> 
          <div class="panel-body"> 
           <div id="morris-line-chart"></div> 
          </div> 
      </div> 

         <div id="tabs-2" class="statdiv"> 
      <h4>Tab 2</h4> 
          <div class="panel-body"> 
           <div id="morris-line-chart2"></div> 
          </div> 
      </div> 

         <div id="tabs-3" class="statdiv"> 
      <h4>Tab 3</h4> 
          <div class="panel-body"> 
           <div id="morris-line-chart3"></div> 
          </div> 
      </div> 

         <div id="tabs-4" class="statdiv"> 
      <h4>Tab 4</h4> 
          <div class="panel-body"> 
           <div id="morris-line-chart4"></div> 
          </div> 
      </div> 

      <ul class="navtab"> 
       <li class="stattab1 active"><a href="#tabs-1">Tab 1</a></li> 
       <li class="stattab2"><a href="#tabs-2">Tab 2</a></li> 
       <li class="stattab3"><a href="#tabs-3">Tab 3</a></li> 
       <li class="stattab4"><a href="#tabs-4">Tab 4</a></li> 
      </ul> 

     </div> 

JS的圖表：

$(function() { 

Morris.Line({ 
    // ID of the element in which to draw the chart. 
    element: 'morris-line-chart', 
    // Chart data records -- each entry in this array corresponds to a point on 
    // the chart. 
    data: [{ 
     d: '2012-10-01', 
     visits: 802 
    }, { 
     d: '2012-10-02', 
     visits: 783 
    }, { 
     d: '2012-10-03', 
     visits: 820 
    }, { 
     d: '2012-10-04', 
     visits: 839 
    }, { 
     d: '2012-10-05', 
     visits: 792 
    }, { 
     d: '2012-10-06', 
     visits: 859 
    }, { 
     d: '2012-10-07', 
     visits: 790 
    }, { 
     d: '2012-10-08', 
     visits: 1680 
    }, { 
     d: '2012-10-09', 
     visits: 1592 
    }, { 
     d: '2012-10-10', 
     visits: 1420 
    }, { 
     d: '2012-10-11', 
     visits: 882 
    }, { 
     d: '2012-10-12', 
     visits: 889 
    }, { 
     d: '2012-10-13', 
     visits: 819 
    }, { 
     d: '2012-10-14', 
     visits: 849 
    }, { 
     d: '2012-10-15', 
     visits: 870 
    }, { 
     d: '2012-10-16', 
     visits: 1063 
    }, { 
     d: '2012-10-17', 
     visits: 1192 
    }, { 
     d: '2012-10-18', 
     visits: 1224 
    }, { 
     d: '2012-10-19', 
     visits: 1329 
    }, { 
     d: '2012-10-20', 
     visits: 1329 
    }, { 
     d: '2012-10-21', 
     visits: 1239 
    }, { 
     d: '2012-10-22', 
     visits: 1190 
    }, { 
     d: '2012-10-23', 
     visits: 1312 
    }, { 
     d: '2012-10-24', 
     visits: 1293 
    }, { 
     d: '2012-10-25', 
     visits: 1283 
    }, { 
     d: '2012-10-26', 
     visits: 1248 
    }, { 
     d: '2012-10-27', 
     visits: 1323 
    }, { 
     d: '2012-10-28', 
     visits: 1390 
    }, { 
     d: '2012-10-29', 
     visits: 1420 
    }, { 
     d: '2012-10-30', 
     visits: 1529 
    }, { 
     d: '2012-10-31', 
     visits: 1892 
    }, ], 
    // The name of the data record attribute that contains x-visitss. 
    xkey: 'd', 
    // A list of names of data record attributes that contain y-visitss. 
    ykeys: ['visits'], 
    // Labels for the ykeys -- will be displayed when you hover over the 
    // chart. 
    labels: ['Visits'], 
    // Disables line smoothing 
    smooth: false, 
    resize: false 
}); 

Morris.Line({ 
    // ID of the element in which to draw the chart. 
    element: 'morris-line-chart2', 
    // Chart data records -- each entry in this array corresponds to a point on 
    // the chart. 
    data: [{ 
     d: '2012-10-01', 
     visits: 802 
    }, { 
     d: '2012-10-02', 
     visits: 783 
    }, { 
     d: '2012-10-03', 
     visits: 820 
    }, { 
     d: '2012-10-04', 
     visits: 839 
    }, { 
     d: '2012-10-05', 
     visits: 792 
    }, { 
     d: '2012-10-06', 
     visits: 859 
    }, { 
     d: '2012-10-07', 
     visits: 790 
    }, { 
     d: '2012-10-08', 
     visits: 1680 
    }, { 
     d: '2012-10-09', 
     visits: 1592 
    }, { 
     d: '2012-10-10', 
     visits: 1420 
    }, { 
     d: '2012-10-11', 
     visits: 882 
    }, { 
     d: '2012-10-12', 
     visits: 889 
    }, { 
     d: '2012-10-13', 
     visits: 819 
    }, { 
     d: '2012-10-14', 
     visits: 849 
    }, { 
     d: '2012-10-15', 
     visits: 870 
    }, { 
     d: '2012-10-16', 
     visits: 1063 
    }, { 
     d: '2012-10-17', 
     visits: 1192 
    }, { 
     d: '2012-10-18', 
     visits: 1224 
    }, { 
     d: '2012-10-19', 
     visits: 1329 
    }, { 
     d: '2012-10-20', 
     visits: 1329 
    }, { 
     d: '2012-10-21', 
     visits: 1239 
    }, { 
     d: '2012-10-22', 
     visits: 1190 
    }, { 
     d: '2012-10-23', 
     visits: 1312 
    }, { 
     d: '2012-10-24', 
     visits: 1293 
    }, { 
     d: '2012-10-25', 
     visits: 1283 
    }, { 
     d: '2012-10-26', 
     visits: 1248 
    }, { 
     d: '2012-10-27', 
     visits: 1323 
    }, { 
     d: '2012-10-28', 
     visits: 1390 
    }, { 
     d: '2012-10-29', 
     visits: 1420 
    }, { 
     d: '2012-10-30', 
     visits: 1529 
    }, { 
     d: '2012-10-31', 
     visits: 1892 
    }, ], 
    // The name of the data record attribute that contains x-visitss. 
    xkey: 'd', 
    // A list of names of data record attributes that contain y-visitss. 
    ykeys: ['visits'], 
    // Labels for the ykeys -- will be displayed when you hover over the 
    // chart. 
    labels: ['Visits'], 
    // Disables line smoothing 
    smooth: false, 
    resize: false 
}); 


Morris.Line({ 
    // ID of the element in which to draw the chart. 
    element: 'morris-line-chart3', 
    // Chart data records -- each entry in this array corresponds to a point on 
    // the chart. 
    data: [{ 
     d: '2012-10-01', 
     visits: 802 
    }, { 
     d: '2012-10-02', 
     visits: 783 
    }, { 
     d: '2012-10-03', 
     visits: 820 
    }, { 
     d: '2012-10-04', 
     visits: 839 
    }, { 
     d: '2012-10-05', 
     visits: 792 
    }, { 
     d: '2012-10-06', 
     visits: 859 
    }, { 
     d: '2012-10-07', 
     visits: 790 
    }, { 
     d: '2012-10-08', 
     visits: 1680 
    }, { 
     d: '2012-10-09', 
     visits: 1592 
    }, { 
     d: '2012-10-10', 
     visits: 1420 
    }, { 
     d: '2012-10-11', 
     visits: 882 
    }, { 
     d: '2012-10-12', 
     visits: 889 
    }, { 
     d: '2012-10-13', 
     visits: 819 
    }, { 
     d: '2012-10-14', 
     visits: 849 
    }, { 
     d: '2012-10-15', 
     visits: 870 
    }, { 
     d: '2012-10-16', 
     visits: 1063 
    }, { 
     d: '2012-10-17', 
     visits: 1192 
    }, { 
     d: '2012-10-18', 
     visits: 1224 
    }, { 
     d: '2012-10-19', 
     visits: 1329 
    }, { 
     d: '2012-10-20', 
     visits: 1329 
    }, { 
     d: '2012-10-21', 
     visits: 1239 
    }, { 
     d: '2012-10-22', 
     visits: 1190 
    }, { 
     d: '2012-10-23', 
     visits: 1312 
    }, { 
     d: '2012-10-24', 
     visits: 1293 
    }, { 
     d: '2012-10-25', 
     visits: 1283 
    }, { 
     d: '2012-10-26', 
     visits: 1248 
    }, { 
     d: '2012-10-27', 
     visits: 1323 
    }, { 
     d: '2012-10-28', 
     visits: 1390 
    }, { 
     d: '2012-10-29', 
     visits: 1420 
    }, { 
     d: '2012-10-30', 
     visits: 1529 
    }, { 
     d: '2012-10-31', 
     visits: 1892 
    }, ], 
    // The name of the data record attribute that contains x-visitss. 
    xkey: 'd', 
    // A list of names of data record attributes that contain y-visitss. 
    ykeys: ['visits'], 
    // Labels for the ykeys -- will be displayed when you hover over the 
    // chart. 
    labels: ['Visits'], 
    // Disables line smoothing 
    smooth: false, 
    resize: true 
}); 

Morris.Line({ 
    // ID of the element in which to draw the chart. 
    element: 'morris-line-chart4', 
    // Chart data records -- each entry in this array corresponds to a point on 
    // the chart. 
    data: [{ 
     e: '2012-10-01', 
     visit: 9 
    }, { 
     e: '2012-10-02', 
     visit: 783 
    }, { 
     e: '2012-10-03', 
     visit: 820 
    }, { 
     e: '2012-10-04', 
     visit: 839 
    }, { 
     e: '2012-10-05', 
     visit: 792 
    }, { 
     e: '2012-10-06', 
     visit: 859 
    }, { 
     e: '2012-10-07', 
     visit: 790 
    }, { 
     e: '2012-10-08', 
     visit: 1680 
    }, { 
     e: '2012-10-09', 
     visit: 1592 
    }, { 
     e: '2012-10-10', 
     visit: 1420 
    }, { 
     e: '2012-10-11', 
     visit: 882 
    }, { 
     e: '2012-10-12', 
     visit: 889 
    }, { 
     e: '2012-10-13', 
     visit: 819 
    }, { 
     e: '2012-10-14', 
     visit: 849 
    }, { 
     e: '2012-10-15', 
     visit: 870 
    }, { 
     e: '2012-10-16', 
     visit: 1063 
    }, { 
     e: '2012-10-17', 
     visit: 1192 
    }, { 
     e: '2012-10-18', 
     visit: 1224 
    }, { 
     e: '2012-10-19', 
     visit: 1329 
    }, { 
     e: '2012-10-20', 
     visit: 1329 
    }, { 
     e: '2012-10-21', 
     visit: 1239 
    }, { 
     e: '2012-10-22', 
     visit: 1190 
    }, { 
     e: '2012-10-23', 
     visit: 1312 
    }, { 
     e: '2012-10-24', 
     visit: 1293 
    }, { 
     e: '2012-10-25', 
     visit: 1283 
    }, { 
     e: '2012-10-26', 
     visit: 1248 
    }, { 
     e: '2012-10-27', 
     visit: 1323 
    }, { 
     e: '2012-10-28', 
     visit: 1390 
    }, { 
     e: '2012-10-29', 
     visit: 1420 
    }, { 
     e: '2012-10-30', 
     visit: 1529 
    }, { 
     e: '2012-10-31', 
     visit: 1892 
    }, ], 
    // The name of the data record attribute that contains x-visitss. 
    xkey: 'e', 
    // A list of names of data record attributes that contain y-visitss. 
    ykeys: ['visit'], 
    // Labels for the ykeys -- will be displayed when you hover over the 
    // chart. 
    labels: ['visit'], 
    // Disables line smoothing 
    smooth: false, 
    resize: false 
}); 


Morris.Donut({ 
    element: 'morris-donut-chart', 
    data: [{ 
     label: "Download Sales", 
     value: 12 
    }, { 
     label: "In-Store Sales", 
     value: 30 
    }, { 
     label: "Mail-Order Sales", 
     value: 20 
    }], 
    resize: true 
}); 


Morris.Donut({ 
    element: 'morris-donut-chart2', 
    data: [{ 
     label: "Download Sales", 
     value: 1 
    }, { 
     label: "In-Store Sales", 
     value: 30 
    }, { 
     label: "Mail-Order Sales", 
     value: 20 
    }], 
    resize: true 
}); 




}); 

編輯：發現這個多了很多職位，但所有的答案指向的jsfiddle是不再可用:(

。

編輯2：也發現這個，但是jsfiddle實際上並沒有顯示圖形，所以看起來也破了http://jsfiddle.net/rbsthlm/cD6dd/12/。似乎無法得到重繪（）的工作

Answer 1

發現這裏的解決方案：

http://jsfiddle.net/rbsthlm/cD6dd/12/

<div id="monitor" class="panel panel-default tab-box"> 
<div class="panel-heading"> 
    <h3 class="panel-title"> 
     <i class="fa fa-signal"></i> 
     Monitoring report 
    </h3> 

    <ul class="nav nav-tabs"> 
     <li class="active"> <a href="#fuel-tab" data-toggle="tab" data-identifier="line, donut">Fuel data</a> 

     </li> 
     <li> <a href="#co2-tab" data-toggle="tab" data-identifier="bar1">Co2 data</a> 

     </li> 
    </ul> 
</div> 
<div class="panel-body"> 
    <div class="tab-content"> 
     <div id="fuel-tab" class="tab-pane active"> 
      <div class="row"> 
       <div class="col-sm-12 col-md-7 chart"> 
        <div class="caption">Fuel consumption last 12 months <span class="label label-default">Liter/100km</span> 

        </div> 
        <div id="fuel-consumption"></div> 
        <div class="legend"> <span id="city" class="label">City</span> 
<span id="highway" class="label">Highway</span> 
<span id="idle" class="label">Idle</span> 

        </div> 
       </div> 
       <div class="col-sm-12 col-md-5 chart"> 
        <div class="caption">Fuel projection this month</div> 
        <div id="fuel-projection"></div> 
        <div class="legend"> <span id="projection" class="label">Projection</span> 
<span id="today" class="label">Until today</span> 

        </div> 
       </div> 
      </div> 
     </div> 
     <div id="co2-tab" class="tab-pane"> 
      <div class="row"> 
       <div class="col-xs-12 chart"> 
        <div class="caption">Monthly Co2 Emissions <span class="label label-default">g/km</span> 

        </div> 
        <div id="co2-emissions"></div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
</div> 

JS：

$('ul.nav a').on('shown.bs.tab', function (e) { 
var types = $(this).attr("data-identifier"); 
var typesArray = types.split(","); 
$.each(typesArray, function (key, value) { 
    eval(value + ".redraw()"); 
}) 
}); 
// Morris graphs ---------------------------------------------------------- // 
// on doc ready 
$(function() { 
// Fuel consumption // 
// Data set for fuel consumption 
var fuel_data = [{ 
    "period": "2013-01", 
    "city": 66, 
    "highway": 34, 
    "idle": 9 
}, { 
    "period": "2013-02", 
    "city": 62, 
    "highway": 33, 
    "idle": 8 
}, { 
    "period": "2013-03", 
    "city": 61, 
    "highway": 32, 
    "idle": 7 
}, { 
    "period": "2013-04", 
    "city": 66, 
    "highway": 32, 
    "idle": 6 
}, { 
    "period": "2013-05", 
    "city": 67, 
    "highway": 31, 
    "idle": 5 
}, { 
    "period": "2013-06", 
    "city": 68, 
    "highway": 43, 
    "idle": 7 
}, { 
    "period": "2013-07", 
    "city": 62, 
    "highway": 32, 
    "idle": 5 
}, { 
    "period": "2013-08", 
    "city": 61, 
    "highway": 32, 
    "idle": 5 
}, { 
    "period": "2013-09", 
    "city": 58, 
    "highway": 32, 
    "idle": 7 
}, { 
    "period": "2013-10", 
    "city": 60, 
    "highway": 32, 
    "idle": 7 
}, { 
    "period": "2013-11", 
    "city": 60, 
    "highway": 32, 
    "idle": 6 
}, { 
    "period": "2013-12", 
    "city": 62, 
    "highway": 32, 
    "idle": 8 
}]; 
// Line chart parameters for fuel consumption 
var fuel_consumption = { 
    element: 'fuel-consumption', 
    hideHover: 'auto', 
    data: fuel_data, 
    xkey: 'period', 
    xLabels: 'month', 
    ykeys: ['city', 'highway', 'idle'], 
    postUnits: ' l/100km', 
    labels: ['City', 'Highway', 'Idle'], 
    resize: true, 
    lineColors: ['#A52A2A', '#72A0C1', '#7BB661'] 
    //yLabelFormat: function(y) { return y.toString() + ' l/100km'; } 
} 

// Make a line chart from the parameters 
line = Morris.Line(fuel_consumption) 
///Fuel consumption // 

// Fuel projection // 
// Data set for fuel projection 
var projection_data = [{ 
    label: 'Until today', 
    value: 180 
}, { 
    label: 'Projected', 
    value: 400 
}, ] 
// Donut chart parameters for fuel projection 
var fuel_projection = { 
    element: 'fuel-projection', 
    hideHover: 'auto', 
    resize: true, 
    data: projection_data, 
    colors: ['#7BB661', '#72A0C1'], 
    formatter: function (y) { 
     return y + " liters" 
    } 
} 

// Make a donut chart from the parameters 
donut = Morris.Donut(fuel_projection) 
///Fuel projection // 

// Fuel emissions // 
// Data set for fuel emissions 
var co2_data = [{ 
    month: 'Jan', 
    emissions: 35 
}, { 
    month: 'Feb', 
    emissions: 37 
}, { 
    month: 'Mar', 
    emissions: 40 
}, { 
    month: 'Apr', 
    emissions: 38 
}, { 
    month: 'Maj', 
    emissions: 39 
}, { 
    month: 'Jun', 
    emissions: 42 
}, { 
    month: 'Jul', 
    emissions: 37 
}, { 
    month: 'Aug', 
    emissions: 65 
}, { 
    month: 'Sep', 
    emissions: 38 
}, { 
    month: 'Okt', 
    emissions: 45 
}, { 
    month: 'Nov', 
    emissions: 41 
}, { 
    month: 'Dec', 
    emissions: 41 
}] 
//Bar chart parameters for CO2 emissions 
var co2_emissions = { 
    element: 'co2-emissions', 
    resize: true, 
    data: co2_data, 
    xkey: 'month', 
    ykeys: ['emissions'], 
    labels: ['Co2 emissions'], 
    barRatio: 0.4, 
    xLabelAngle: 35, 
    hideHover: 'auto', 
    postUnits: ' g/km', 
    formatter: function (y) { 
     return y + " g/km" 
    } 
} 

// Make a bar chart from the parameters 
bar1 = Morris.Bar(co2_emissions) 
///Fuel emisisons // 
}); 
///Morris graphs -------------------------------------------------------- // 

只畫了一半的圖表，但 - 這也正是這個派上了用場：

#chartelementid svg {width:100%;}