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

Draw line chart when ykey value equal 0 and xkeys are months

本文关键字：绘制折线图 xkey ykey 更新时间：2023-09-26

我正在使用morris.js以xkeys为单位制作月份的折线图，以y为单位制作数值。

y 值等于 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：对象梅斯："一" 生命力： 0.47 无畏： 0
1：对象梅斯："菲夫" 生命力： 0.47 无畏： 0
2：对象梅斯："三月" 生命力： 0.47 无畏： 0
3：对象梅斯："阿布尔" 勇气： 0 无畏： 0
4：对象梅斯："麻衣" 勇气： 0 无畏： 0
5：对象梅斯："君" 勇气： 0 无畏： 0.51
6：对象梅斯："七月" 勇气： 0 无畏： 0.48
7：对象梅斯："前" 勇气： 0 无畏： 0.48
8：对象梅斯："设置" 勇气： 0 无畏： 0.48
9：对象梅斯："出" 勇气： 0 无畏： 0.48
10：对象梅斯："十一月" 勇气： 0 无畏： 0.48
11：对象梅斯："德兹" 勇气： 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);
        }
    });
};

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

resize: true

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

删除您的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');
});