Question

我使用morris.js在xkeys中用几个月做折线图，用y做数字值。

但是当我的所有Y值都等于0时，图表并没有很好地绘制。有人有同样的问题吗？

这是我的代码：

$.ajax({
    url: "getValuesModel.ashx?id=chart1&refe=" + refe,
    success: function (data) {
        resultschart1 = data;                                    
        Morris.Line({
            element: 'chart1',
            axes: true,
            data: resultschart1,
            xkey: 'mes',
            ykeys: ['valor', 'valorant'],
            labels: [(new Date).getFullYear(), (new Date).getFullYear() - 1],
            parseTime: false,
            barColors: ['#707f9b', '#77709b'],
        });
    },
    error: function (data) {
        resultschart = "[]";
    }
});

更新1

例如，我的图表以此格式接收数据：

0：对象   mes：＆＃34; Jan＆＃34;   英勇：0.47   讽刺：0
  1：对象   mes：＆＃34; Fev＆＃34;   英勇：0.47   讽刺：0
  2：对象   mes：＆＃34; Mar＆＃34;   英勇：0.47   讽刺：0
  3：对象   mes：＆＃34; Abr＆＃34;   勇气：0   讽刺：0
  4：对象   mes：＆＃34; Mai＆＃34;   勇气：0   讽刺：0
  5：对象   mes：＆＃34; Jun＆＃34;   勇气：0   讽刺：0.51
  6：对象   mes：＆＃34; Jul＆＃34;   勇气：0   讽刺：0.48
  7：对象   mes：＆＃34; Ago＆＃34;   勇气：0   讽刺：0.48
  8：对象   mes：＆＃34; Set＆＃34;   勇气：0   讽刺：0.48
  9：对象   mes：＆＃34; Out＆＃34;   勇气：0   讽刺：0.48
  10：对象   mes：＆＃34; Nov＆＃34;   勇气：0   讽刺：0.48
  11：对象   mes：＆＃34; Dez＆＃34;   勇气：0   缬氨酸：0.47

更新2

<div id="infoModal1" role="dialog" class="modal fade custom-width" aria-hidden="true">
    <div class="modal-dialog" style="width: 96%">
        <div class="modal-content">

            <div class="modal-header">
                <div id="titulo"></div>
                <button type="button" data-dismiss="modal" class="close">&times;</button>
            </div>

            <div class="modal-body">
                <div id='dados'></div>
                <h4>Análise da quantidade vendida</h4>
                <div id="chartVenda" style="height: 250px"></div>
                <h4>Variação do preço</h4>
                <div id="chartPreco" style="height: 250px"></div>
            </div>

            <div class="modal-footer">
                <button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
            </div>

        </div>
    </div>
</div>

function verLinha1(o) {
    var refe = o.getAttribute('name');
    jQuery.ajax({
        //pegando a url apartir da action do form
        url: "clientePreco.aspx/trataModal",
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        data: JSON.stringify({ refe: refe }),
        type: 'POST',
        success: function (data) {
            (function ($) {
                var jsonostr = data.d;
                var jsonobj = eval('(' + jsonostr + ')');

                $("#dados").html("");
                $('#titulo').empty();
                $('#titulo').append("<h3>" + refe + "</h3>")
                $('#dados').empty();
                $("#dados").append("<div class='row'>");
                $("#dados").append("<div class='col-md-3'>Menor Qtt.</div>");
                $("#dados").append("<div class='well well-sm col-md-3'>" + jsonobj["menorqtt"] + "</div>");
                $("#dados").append("<div class='col-md-3'>Dt. Menor Qtt.</div>");
                $("#dados").append("<div class='well well-sm col-md-3'>" + jsonobj["menorqttdt"] + "</div>");
                $("#dados").append("</div>");
                $("#dados").append("<div class='row'>");
                $("#dados").append("<div class='col-md-3'>Maior Qtt</div>");
                $("#dados").append("<div class='well well-sm col-md-3'>" + jsonobj["maiorqtt"] + "</div>");
                $("#dados").append("<div class='col-md-3'>Dt. Maior Qtt</div>");
                $("#dados").append("<div class='well well-sm col-md-3'>" + jsonobj["maiorqttdt"] + "</div>");
                $("#dados").append("</div>");
                $("#dados").append("<div class='row'>");
                $("#dados").append("<div class='col-md-3'>Média Mensal </div>");
                $("#dados").append("<div class='well well-sm col-md-3'>" + jsonobj["mediamensal"] + "</div>");
                $("#dados").append("<div class='col-md-3'>Média Mensal Ano Ant.</div>");
                $("#dados").append("<div class='well well-sm col-md-3'>" + jsonobj["mediamensalant"] + "</div>");
                $("#dados").append("</div>");
                $("#dados").append("<div class='row'>");
                $("#dados").append("<div class='col-md-3'>Qnt. Total Anual </div>");
                $("#dados").append("<div class='well well-sm col-md-3'>" + jsonobj["qtttt"] + "</div>");
                $("#dados").append("<div class='col-md-3'>Qnt. Total Anual Ano Ant </div>");
                $("#dados").append("<div class='well well-sm col-md-3'>" + jsonobj["qttttant"] + "</div>");
                $("#dados").append("</div>");

                $('#infoModal1').modal('show');
                var ano = (new Date).getFullYear();
                setTimeout(function () {
                    $.ajax({
                        url: "getValuesModel.ashx?id=chartVenda&refe=" + refe,
                        success: function (data) {
                            $('#chartVenda').empty();

                            resultschart = data;
                            console.log(resultschart);
                            Morris.Line({
                                element: 'chartVenda',
                                data: resultschart,
                                xkey: 'mes',
                                ykeys: ['valor', 'valorant'],
                                labels: [ano, ano - 1],
                                barColors: ['#707f9b', '#77709b'],
                                parseTime: false,
                                resize: true,

                            })
                        },
                        error: function (data) {
                            resultschart = "[]";
                        }
                    });

                    $.ajax({
                        url: "getValuesModel.ashx?id=chartPreco&refe=" + refe,
                        success: function (data) {
                            $('#chartPreco').empty();
                            console.log(data);
                            resultschart1 = data;
                            Morris.Line({
                                element: 'chartPreco',
                                axes: true,
                                data: resultschart1,
                                xkey: 'mes',
                                ykeys: ['valor', 'valorant'],
                                labels: [ano, ano - 1],
                                parseTime: false,
                                barColors: ['#707f9b', '#77709b'],
                            });
                        },
                        error: function (data) {
                            resultschart = "[]";
                        }
                    });
                }, 100);
            })(jQuery);
        }
    });
};

Answer 1

确保已将resize属性设置为true，以强制Morris在窗口大小更改时重绘图表：

resize: true

在$(document).ready窗口调整大小功能中添加。
然后trigger在常见的ajax回调then中调整大小。

删除setTimeout并将show指令放入常见的回调中：

$(document).ready(function () {
    $(window).on('resize', function () {
        window.mVenda.redraw();
        window.mPreco.redraw();
    });
});

$.when( 
    $.ajax({
        url: "getValuesModel.ashx?id=chartVenda&refe=" + refe,
        success: function (data) {
            $('#chartVenda').empty();

            resultschart = data;
            console.log(resultschart);
            window.mVenda = Morris.Line({
                element: 'chartVenda',
                data: resultschart,
                xkey: 'mes',
                ykeys: ['valor', 'valorant'],
                labels: [ano, ano - 1],
                barColors: ['#707f9b', '#77709b'],
                parseTime: false,
                resize: true
            });
        },
        error: function (data) {
            resultschart = "[]";
        }
    }),

    $.ajax({
        url: "getValuesModel.ashx?id=chartPreco&refe=" + refe,
        success: function (data) {
            $('#chartPreco').empty();
            console.log(data);
            resultschart1 = data;
            window.mPreco = Morris.Line({
                element: 'chartPreco',
                axes: true,
                data: resultschart1,
                xkey: 'mes',
                ykeys: ['valor', 'valorant'],
                labels: [ano, ano - 1],
                parseTime: false,
                barColors: ['#707f9b', '#77709b'],
                resize: true
            });
        },
        error: function (data) {
            resultschart = "[]";
        }
    })
).then(function() {
    $('#infoModal1').modal('show');
    $(window).trigger('resize');
});

当ykey值等于0且xkeys为月时绘制折线图

1 个答案: