Morris图表缺少一半部分

我在我的应用程序项目中使用了morris图表来显示有关销售数量的一些详细信息。Morris图表缺少一半部分

执行AJAX请求后，图表只显示半个部分。下面是语法：

var chartBahan = Morris.Bar ({ 
    element: 'morris-analytics-bahan', 
    xkey: '2', 
    ykeys: ['3'], 
    labels: ['Quantity Bahan'], 
    resize: false, 
    gridEnabled: true 
}); 

//getting the morris chart over bahan and karakteristik 
function getBahanPotensial(kode){ 
    //ajax call 
    $.ajax({ 
     type:"POST", 
     async: false, 
     url:"<%= request.getContextPath()%>/GenerateListBahanPotensial", 
     data:{ 
      kode:kode 
     }, 
     success: function(data){ 
      chartBahan.setData($.parseJSON(data)); 
      chartBahan.redraw(); 
     }, 
     error:function(msg){ 
      alert("Data Failed to Analyze" + msg); 
     } 
    }); 
} 

var chartKarakter = new Morris.Bar ({ 
    element: 'morris-analytics-karakter', 
    xkey: '2', 
    ykeys: ['3'], 
    labels: ['Karakter Quantity'], 
    resize: true 
}); 

function getKarakterPotensial(kode){ 
    //ajax call 
    $.ajax({ 
     type:"POST", 
     async: false, 
     url:"<%= request.getContextPath()%>/GenerateListKarakterPotensial", 
     data:{ 
      kode:kode 
     }, 
     success:function(data){ 
      chartKarakter.setData($.parseJSON(data)); 
      chartKarakter.redraw(); 
     }, 
     error:function(msg){ 
      alert("Data Failed to Analyze" + msg); 
     } 
    }); 
}

我从另一个功能使执行上述功能说doProcess（）

function sendRequest(thecode){ 
    if(thecode === ""){ alert("Tolong Input Kode Produk");} 
    else { 
     var kodebarang = thecode; 
    } 
    //executing AJAX call.     
    $.ajax({ 
     type:"POST", 
     async: false, 
     url:"<%= request.getContextPath()%>/GenerateAnalytics", 
     data:{ 
      kodebarang:kodebarang 
     }, 
     success:function(msg){ 
      $('#result_analysis').show(); 
      $('#navigation_button').show(); 
      new Morris.Bar ({ 
       element: 'morris-analytics-bar', 
       data: $.parseJSON(msg), 
       xkey: '1', 
       ykeys: ['2', '3'], 
       labels: ['Sales Area', 'Tingkat Penjualan'], 
       barRatio: 0.4, 
       xLabelAngle: 0, 
       hideHover: 'auto' 
      }); 

      //execute the morris chart others !! PENTING 
      var kodeb = $('#bahan_id').val(); 
      var kodek = $('#karakteristik_id').val(); 
      getBahanPotensial(kodeb); 
      getKarakterPotensial(kodek); 
     }, 
     error:function(msg){ 
      alert("Data Failed to Analyze" + msg); 
     } 
    }); 
}

但问题是，当我在成功回调

success:function(msg){ 
    $('#result_analysis').show(); 
    $('#navigation_button').show(); 
    new Morris.Bar ({ 
     element: 'morris-analytics-bar', 
     data: $.parseJSON(msg), 
     xkey: '1', 
     ykeys: ['2', '3'], 
     labels: ['Sales Area', 'Tingkat Penjualan'], 
     barRatio: 0.4, 
     xLabelAngle: 0, 
     hideHover: 'auto' 
    });

创建莫里斯图

图表正确显示。下面是截图： properly showing

但是其他的图表当我使用模板图表（success回调外）图表坏

这里的截图

error chart

然后，我有下拉列表根据特定参数重新生成图表，图表正确显示（所有数据显示），但图表只有一半PAGE。这里的截图：

right half

是不是有什么事情什么想法？

UPDATE

我的意思模板是这样的代码：

var chartBahan = Morris.Bar ({ 
    element: 'morris-analytics-bahan', 
    xkey: '2', 
    ykeys: ['3'], 
    labels: ['Quantity Bahan'], 
    resize: false, 
    gridEnabled: true 
});

，并调用模板的方法是

success:function(data){ 
    chartBahan.setData($.parseJSON(data)); 
    chartBahan.redraw(); 
},

的右图是第一张截图。它比其他两个更宽。

更新2

仍然得到由莫里斯:(

这里的截图创建图表错误。

error graph again!

来源

2014-02-21 randytan

哪里是“外面的成功回调”如果你画里面3个成功回调所有3走势图？ “模板”这个词是什么意思，它在代码中的位置？另外最后的截图对我来说看起来还不错，但如果出现问题，请写下更多细节。 – vorrtex

@vorrtex请参阅更新部分。谢谢。 – randytan

二是从你的例子最后排行榜扔错误的地段Google Chrome的控制台（可以按F12打开它）。

原因是当您致电Morris.Bar({ data: ... })时需要data属性，但在您的示例中，您没有此属性。所以，你应该完全删除你的声明像var chartBahan = Morris.Bar (...以及与此代码替换成功回调：

function getBahanPotensial(kode){ 
    $.ajax({ 
    ... 
     success: function(data){ 
      if (window.chartBahan) { 
       chartBahan.setData($.parseJSON(data)); 
       // chartBahan.redraw(); // useless call, it can be removed 
      } else { 
       window.chartBahan = Morris.Bar ({ 
        element: 'morris-analytics-bahan', 
        data: $.parseJSON(data), 
        xkey: '2', 
        ykeys: ['3'], 
        labels: ['Quantity Bahan'], 
        resize: false, 
        gridEnabled: true 
       }); 
      } 
     } 
    ... 
    }); 
}

在我的代码检查全局变量window.chartBahan是否存在，如果它不 - 我创建一个新的图表;否则我会拨打setData并自动更新图表。

另外你还没有发布你的HTML标记，它可能有问题。我用这个HTML代码，它工作得很好：

<body> 
    <div id="morris-analytics-bar" style="height: 250px;"></div> 
    <div id="morris-analytics-bahan" style="height: 250px;"></div> 
    <div id="morris-analytics-karakter" style="height: 250px;"></div> 
</body>

来源

2014-02-21 17:36:48 vorrtex

我还没有尝试过你的方法，但我会告诉你结果是什么。感谢您的回答。 – randytan

我尝试过这种方法，我的图表没有正确显示。再次看到更新的部分。谢谢。 – randytan

似乎morris图表不能渲染和计算div的宽度和高度，所以它总是破损。我看到了我的Chrome控制台并抛出一个错误'错误：属性width =“ - 1”的无效负值' – randytan

我解决了这个问题，在CSS中的SVG元素的宽度设置为100％

svg{ 
    width: 100% !important 
}

来源

2014-08-22 23:00:51 Schutt

//的Java脚本代码

Morris.Line({ 
     element: 'hero-area', 
     data: getdata("<?php echo base_url('user/getYearlPremiumuser');?>") , 
     xkey: 'Year', 
     parseTime: false, 
     ykeys: ['Teacher', 'Student'], 

     labels: ['Teacher', 'Student'], 
     hideHover: 'false', 
     lineWidth: 1, 
     pointSize: 5, 
     lineColors: ['#4a8bc2', '#ff6c60'], 
     fillOpacity:7, 
     smooth: true 
    });

********//php code (code codeigniter)********

public function getYearlPremiumuser() 
    { 

     $teacherArray={ y: '2014', a: 50, b: 90}, 
    { y: '2015', a: 65, b: 75}, 
    { y: '2016', a: 50, b: 50}, 
    { y: '2017', a: 75, b: 60}, 
    { y: '2018', a: 80, b: 65}, 
    { y: '2019', a: 90, b: 70}, 
    { y: '2020', a: 100, b: 75}, 
    { y: '2021', a: 115, b: 75}, 
    { y: '2022', a: 120, b: 85}, 
    { y: '2023', a: 145, b: 85}, 
    { y: '2024', a: 160, b: 95} 
     for($i=0;$i<count($teacherArray);$i++) 
     { 
      $temp=array(); 
      $temp= array_merge($teacherArray[$i],$studentarray[$i]); 
      $finalResultArray[]=$temp; 

     } 
     echo json_encode($finalResultArray); 
    }

click here to know more

来源

2015-11-02 10:04:11

请考虑编辑您的帖子，以添加更多关于您的代码的解释以及为什么它可以解决问题。一个主要包含代码的答案（即使它正在工作）通常不会帮助OP了解他们的问题。 – SuperBiasedMan

我有使用Morris.js和Angular2类似的问题 - 在我的情况下，问题是，我在DIV使用带有图表* ngIf = 'showChart'（或[隐藏] = '！showChart'） - 当我设置图表时，showChar = false，因此div不存在。在我的情况下，我每隔1分钟定期读取一次数据，所以一开始dataLoad我什么都看不到，在第二个dataLoad后我看到一半的图表）。所以我解决这个问题的（打字稿）：

showchart = true; 
setTimeout(() => { this.setUpChart() }, 1);

而且它的工作原理:)

来源

2016-11-16 19:16:05

Morris图表缺少一半部分

回答

相关问题