モリス線グラフy軸が100％を超えている

Question

モリス線図を使用していますが、y軸が100％を超えています。

[ 
    {"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"} 
] 

モリス折れ線グラフのコードの下に見つけてください：：日付21/03と22/03のx小売

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％私の観測としての価値を持っている以下

は私のJSONデータでありますそのパス要素は直線を描画しません。

Answer 1

デフォルトではMorris.Lineが曲線を描くように設定されているため（smooth：true）、線は100％を超えます。そのため、100％を超える値を持たなくても、その行は100％を超えます。

あなたは曲線を持ってしたくない場合は、falseにsmoothプロパティを設定することができます。

smooth: false 

でもないカーブに最新モリスのバージョン（0.5.1）にはプロパティがありませんライン値がymaxに達した場合。

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>