Question

我正在使用Morris折线图，但我的y轴超过了100％。

以下是我的json数据：

[
  {"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折线图代码：

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: '%'
});

对于日期21/03和22/03 x零售价值为100％我观察到路径元素未绘制直线。

Answer 1

该行超出100％，因为默认情况下，Morris.Line设置为绘制曲线（smooth：true）。这就是为什么，即使你的价值不超过100％，这条线也会超过100％。

如果您不想使用曲线，可以将smooth属性设置为false：

smooth: false

但是在最新的Morris版本（0.5.1）中没有属性，如果值达到ymax，则不会对该线进行曲线。

＆＃13;

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: '%'
});

＆＃13;

<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>

＆＃13;

莫里斯线图y轴超过100％

1 个答案: