javascript - 当ykey值为0且xkeys为月份时绘制折线图

Question

我正在使用 morris.js 在 xkey 中绘制以月为单位的折线图，并在 y 中绘制数值。

Chart when y values equal 0

但是当我的所有 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: Object mes: "Jan" valor: 0.47 valorant: 0
1: Object mes: "Fev" valor: 0.47 valorant: 0
2: Object mes: "Mar" valor: 0.47 valorant: 0
3: Object mes: "Abr" valor: 0 valorant: 0
4: Object mes: "Mai" valor: 0 valorant: 0
5: Object mes: "Jun" valor: 0 valorant: 0.51
6: Object mes: "Jul" valor: 0 valorant: 0.48
7: Object mes: "Ago" valor: 0 valorant: 0.48
8: Object mes: "Set" valor: 0 valorant: 0.48
9: Object mes: "Out" valor: 0 valorant: 0.48
10: Object mes: "Nov" valor: 0 valorant: 0.48
11: Object mes: "Dez" valor: 0 valorant: 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中添加一个窗口调整大小功能。
然后触发在公共(public)ajax回调then中调整大小。

删除 setTimeout 并将 show 指令放入公共(public)回调中:

$(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');
});