Morris line chart y ekseni 100% ötesine gidiyor

Question

Morris çizgi grafiği kullanıyorum ama y eksenim% 100'ün ötesine geçiyor.

[ 
    {"y":"20/03","Threshold":"70","x TV":"0","x CA":"100","x Retail":"0","x Mobility":"100","x Media":"0"}, 
    {"y":"21/03","Threshold":"70","x TV":"100","x CA":"87.69","x Retail":"100","x Mobility":"70","x Media":"86.67"}, 
    {"y":"22/03","Threshold":"70","x TV":"0","x CA":"87.5","x Retail":"100","x Mobility":"93.42","x Media":"82.14"}, 
    {"y":"23/03","Threshold":"70","x TV":"0","x CA":"0","x Retail":"0","x Mobility":"0","x Media":"0"}, 
    {"y":"24/03","Threshold":"70","x TV":"0","x CA":"0","x Retail":"0","x Mobility":"0","x Media":"0"}, 
    {"y":"25/03","Threshold":"70","x TV":"0","x CA":"0","x Retail":"0","x Mobility":"0","x Media":"0"}, 
    {"y":"26/03","Threshold":"70","x TV":"0","x CA":"0","x Retail":"0","x Mobility":"0","x Media":"0"} 
] 

Morris çizgi grafiği kodu aşağıda bulabilirsiniz: Tarihe 21/03 ve 22/03 x Perakende için

Morris.Line({ 
    element: 'morris-line-chart', 
    data: jsonData, 
    xkey: 'y', 
    xLabels: 'day', 
    ykeys: ['x TV', 'x CA', 'x Retail', 'x Mobility', 'x Media', 'Threshold'], 
    ymax: 100, 
    ymin:0, 
    labels: ['x TV', 'x CA', 'x Retail', 'x Mobility', 'x Media', 'Threshold'], 
    hideHover: 'auto', 
    resize: false, 
    parseTime: false, 
    lineColors: ['#C91530', '#871A35', '#E25D00', '#8EADB8', '#F2A200', '#D4D4D4'], 
    //yLabelFormat: function (y) { return y.toString(); }, 
    postUnits: '%' 
}); 

100% benim gözlem olarak değere sahiptir Aşağıda

benim json veridir bu yol elemanı düz çizgiyi çizmiyor.

Answer 1

Satır, varsayılan olarak Morris.Line'ın eğri çizgiler (düz: doğru) çizmek üzere ayarlandığından% 100'ün ötesine geçer. Bu yüzden,% 100'den büyük değerleriniz olmasa bile, satır% 100'ün ötesine geçer.

smooth: false 

Ama son Morris sürümü (0.5.1) değil eğri bir çizgi için hiçbir özellik vardır: Eğer eğri çizgiler olmasını istemiyorsanız

, false smooth özelliğini ayarlayabilirsiniz Değer ymax'a ulaşırsa.

var jsonData = [ 
 
    { "y": "20/03", "Threshold": "70", "x TV": "0", "x CA": "100", "x Retail": "0", "x Mobility": "100", "x Media": "0" }, 
 
    { "y": "21/03", "Threshold": "70", "x TV": "100", "x CA": "87.69", "x Retail": "100", "x Mobility": "70", "x Media": "86.67" }, 
 
    { "y": "22/03", "Threshold": "70", "x TV": "0", "x CA": "87.5", "x Retail": "100", "x Mobility": "93.42", "x Media": "82.14" }, 
 
    { "y": "23/03", "Threshold": "70", "x TV": "0", "x CA": "0", "x Retail": "0", "x Mobility": "0", "x Media": "0" }, 
 
    { "y": "24/03", "Threshold": "70", "x TV": "0", "x CA": "0", "x Retail": "0", "x Mobility": "0", "x Media": "0" }, 
 
    { "y": "25/03", "Threshold": "70", "x TV": "0", "x CA": "0", "x Retail": "0", "x Mobility": "0", "x Media": "0" }, 
 
    { "y": "26/03", "Threshold": "70", "x TV": "0", "x CA": "0", "x Retail": "0", "x Mobility": "0", "x Media": "0" }] 
 

 
Morris.Line({ 
 
    element: 'morris-line-chart', 
 
    data: jsonData, 
 
    xkey: 'y', 
 
    xLabels: 'day', 
 
    ykeys: ['x TV', 'x CA', 'x Retail', 'x Mobility', 'x Media', 'Threshold'], 
 
    ymax: 100, 
 
    ymin:0, 
 
    labels: ['x TV', 'x CA', 'x Retail', 'x Mobility', 'x Media', 'Threshold'], 
 
    hideHover: 'auto', 
 
    resize: false, 
 
    parseTime: false, 
 
    smooth: false, 
 
    lineColors: ['#C91530', '#871A35', '#E25D00', '#8EADB8', '#F2A200', '#D4D4D4'], 
 
    //yLabelFormat: function (y) { return y.toString(); }, 
 
    postUnits: '%' 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet"/> 
 

 
<div id="morris-line-chart"></div>