莫里斯图表缺少一半

时间：2014-02-21 04:41:27

标签： javascript charts morris.js

我在我的应用程序项目中使用了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); 
        }
    });
}

但问题是，当我在成功回调中创建Morris图表时

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

但另一张图表，当我使用模板进行图表制作时（成功回调之外）图表是BROKEN

这是截图

error chart

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

right half

有什么想法会发生什么吗？

更新

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

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!

4 个答案:

答案 0 :(得分：4)

我通过在css

中将svg元素的宽度设置为100％来解决该问题 
svg{
  width: 100% !important
}

答案 1 :(得分：0)

您示例中的最后两个图表在Google Chrome控制台中引发了大量错误（您可以按F12打开它）。

原因是当您致电data时需要Morris.Bar({ 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>

答案 2 :(得分：0)

// 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

答案 3 :(得分：0)

我有类似的问题使用Morris.js和Angular2 - 在我的情况下的问题是我在DIV中使用图表* ngIf =＆＃39; showChart＆＃39; （或[hidden] =＆＃39;！showChart＆＃39;） - 当我设置图表时，showChar = false所以div不存在。在我的情况下，我每1分钟读取一次日期，所以在第一次dataLoad我看不到任何东西，在第二次dataLoad后，我看到图表的一半/部分）。所以我通过（typescript）解决这个问题：

@model myProj.ViewModels.CitiesViewModel
...some html here...

<select asp-for="SelectedCities" asp-items="Model.Cities"</select>

...some html here...

它有效：）

相关问题
最新问题