Javascript 当ykey值等于0且xkey为月份时，绘制折线图_Javascript_Charts_Morris.js

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

javascript charts

Javascript 当ykey值等于0且xkey为月份时，绘制折线图,javascript,charts,morris.js,Javascript,Charts,Morris.js,我使用morris.js在xkeys中绘制了月份折线图，在y中绘制了数值但是当我的Y值都等于0时，图表就画得不好了。有人有同样的问题吗这是我的代码： $.ajax({ url: "getValuesModel.ashx?id=chart1&refe=" + refe, success: function (data) { resultschart1 = data;

我使用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：“一月” 勇气：0.47 勇气：0
1：对象 mes：“Fev” 勇气：0.47 勇气：0
2:对象 mes：“三月” 勇气：0.47 勇气：0
3：对象 mes：“Abr” 勇气：0 勇气：0
4:对象 mes：“麦” 勇气：0 勇气：0
5:对象 mes：“六月” 勇气：0 勇气：0.51
6:对象 mes：“七月” 勇气：0 勇气：0.48
7：反对 mes：“以前” 勇气：0 勇气：0.48
8：反对 mes：“设置” 勇气：0 勇气：0.48
9：反对 mes：“退出” 勇气：0 勇气：0.48
10:反对 mes：“11月” 勇气：0 勇气：0.48
11：反对 mes：“迪兹” 勇气：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);
        }
    });
};


&时代；
文迪达量化酒店
Variação do preço
接近
函数verLinha1（o）{
var refe=o.getAttribute（'name'）；
jQuery.ajax({
//pegando一个url地址一个动作表单
url:“clienteproco.aspx/trataModal”，
contentType:'application/json；charset=utf-8'，
数据类型：“json”，
数据：JSON.stringify（{refe:refe}），
键入：“POST”，
成功：功能（数据）{
（函数（$）{
var jsonostr=data.d；
var jsonobj=eval（“（“+jsonostr+”）”）；
$（“#护墙板”）.html（“”）；
$（'#titulo'）.empty（）；
$（'#titulo'）。追加（“+refe+”）
$（“#护墙板”）.empty（）；
$（“#护墙板”）。追加（“”）；
$（“#护墙板”）.append（“Menor Qtt”）；
$（“#dados”）.append（“+jsonobj[“menorqtt”]+”）；
$（“#dados”）.append（“Dt.Menor Qtt”）；
$（“#dados”）.append（“+jsonobj[“menorqttdtdtt”]+”）；
$（“#护墙板”）。追加（“”）；
$（“#护墙板”）。追加（“”）；
$（“#护墙板”）。附加（“主护墙板”）；
$（“#dados”）.append（“+jsonobj[“maiorqtt”]+”）；
$（“#护墙板”）。附加（“Dt.Maior Qtt”）；
$（“#dados”）.append（“+jsonobj[“maiorqttdtdtt”]+”）；
$（“#护墙板”）。追加（“”）；
$（“#护墙板”）。追加（“”）；
$（“#护墙板”）。附加（“Media Mensal”）；
$（“#护墙板”）.append（“+jsonobj[“mediamensal”]+”）；
$（“#护墙板”）。附加（“Média Mensal Ano Ant”）；
$（“#dados”）.append（“+jsonobj[“mediamansalant”]+”）；
$（“#护墙板”）。追加（“”）；
$（“#护墙板”）。追加（“”）；
$（“#护墙板”）。追加（“Qnt.Total Anual”）；
$（“#dados”）.append（“+jsonobj[“qtttt”]+”）；
$（“#护墙板”）。附加（“数量单位：全年总数量”）；
$（“#dados”）.append（“+jsonobj[“qtttant”]+”）；
$（“#护墙板”）。追加（“”）；
$（'infoModal1'）.modal（'show'）；
var ano=（新日期）.getFullYear（）；
setTimeout（函数（）{
$.ajax({
url:“getValuesModel.ashx？id=chartVenda&refe=“+refe，
成功：功能（数据）{
$（'#chartVenda'）.empty（）；
结果图表=数据；
控制台日志（ResultChart）；
莫里斯线({
元素：“chartVenda”，
资料来源：ResultChart，
xkey:‘mes’，
ykeys:[“英勇”、“英勇”]，
标签：[ano，ano-1]，
条形图：['#707f9b'，'#77709b']，
时间：错，
调整大小：对，
})
},
错误：函数（数据）{
结果chart=“[]”；
}
});
$.ajax({
url:“getValuesModel.ashx？id=chartPreco&refe=“+refe，
成功：功能（数据）{
$（'#chartPreco'）.empty（）；
控制台日志（数据）；
结果Chart1=数据；
莫里斯线({
元素：“chartPreco”，
是的，
资料：结果表1，
xkey:‘mes’，
ykeys:[“英勇”、“英勇”]，
标签：[ano，ano-1]，
时间：错，
条形图：['#707f9b'，'#77709b']，
});
},
错误：函数（数据）{
结果chart=“[]”；
}
});
}, 100);
})（jQuery）；
}
});
};

确保已将

resize

属性设置为true，以便在窗口大小更改时强制Morris重新绘制图表：

resize: true

在

$（文档）中添加。准备好了一个窗口大小调整功能

然后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');
});

它应该是w