Question

您好我正在开发一个在bootstrap选项卡上显示morris图表的应用程序。图表显示在Firefox上，但不会在firefox或Internet Explorer中显示。

请帮忙。

以下是我正在使用的Java脚本代码：

$('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()");
  })
});
$(function() {
  $.getJSON('data.php', function(json) {
    var areac = {
      element: 'revenue-chart',
      data: Object.keys(json.qa).map(function(key) {
        return json.qa[key];
      }),
      xkey: 'audit_date',
      ykeys: ['audit_score'],
      labels: ['QA Score'],
      lineColors: ['#a0d0e0', '#3c8dbc'],
      hideHover: 'auto'
    };
    line = Morris.Line(areac)
      //Donut Chart
    var area1 = {
      element: 'sales-chart',
      data: Object.keys(json.ecsat).map(function(key) {
        return json.ecsat[key];
      }),
      xkey: 'csat_date',
      ykeys: ['csat_score'],
      labels: ['CSAT Score'],
      hideHover: 'auto'
    };
    line1 = Morris.Area(area1)
  });

});

Here is the code

以下是data.php的结果

{ “QA”：[{ “audit_date”： “2014年10月23日”， “audit_score”： “92”}，{ “audit_date”： “2014年10月16日”， “audit_score”：“67 “}，{” audit_date “：” 2014-10-01" ， “audit_score”： “90”}，{ “audit_date”： “2014年10月3日”， “audit_score”： “96”}，{“audit_date “：” 2014年10月5" 日， “audit_score”： “75”}，{ “audit_date”： “二零一四年十月二十零日”， “audit_score”： “89”}]， “ecsat”：[{“csat_score “：” 2.0000" ， “csat_date”： “2014年10月5日”}，{ “csat_score”： “3.7500”， “csat_date”： “二〇一四年十月一十二日”}，{ “csat_score”： “2.0667”， “csat_date”： “2014年10月19日”}，{ “csat_score”： “1.6250”， “csat_date”： “2014年10月26日”}，{ “csat_score”： “1.0000”， “csat_date”：“2014 -11-02 “}]，” pcsat “：[{” pcsat_score “：” 10.0000" ， “pcsat_date”： “2014年10月19日”}，{ “pcsat_score”： “10.0000”， “pcsat_date”：“2014 -11-02" }]}

Answer 1

这个问题被引起了警告，因为引导标签隐藏了我试图绘制图表的内容。

在绘制图表之前添加了一个代码来检查div是否处于活动状态：

$('ul.nav a').on('shown.bs.tab', function(e){
        if ($(e.target).attr('href') == '#tab-name' && $('#tab-name').html().length == 0) 
{
<<---Draw chart here --->>
}
});

morris图表对firefox不起作用

1 个答案: