Пропуск нулевых значений с помощью Morris.js

Question

Я использую Morris.js для построения диаграммы области. Мои данные объявлены следующим образом:

var data = [ 
      { y: 'LUN', a: 1 }, 
      { y: 'MAR', a: 2}, 
      { y: 'MER', a: null }, 
      { y: 'JEU', a: 2 }, 
      { y: 'VEN', a: 1}, 
      { y: 'SAM', a: 0}, 
      { y: 'DIM', a: 1 } 
     ]; 

Когда я сюжет эти данные с помощью Морриса я получил следующую таблицу:

Исходный код основан на следующем задаваемый вопрос:

Adding buttons to a chart - svg

Мой вопрос: возможно ли пропустить нулевые значения и нет t строит их?

Если пропустить нулевые значения график будет как на следующем рисунке:

Вот рабочий код:

(function() { 
 
    var $, MyMorris; 
 

 
    MyMorris = window.MyMorris = {}; 
 
    $ = jQuery; 
 

 
    MyMorris = Object.create(Morris); 
 

 
    MyMorris.Grid.prototype.gridDefaults["lineStyle"] = ""; 
 

 
    MyMorris.Line.prototype.drawLinePath = function (path, lineColor, lineIndex) { 
 
     return this.raphael.path(path).attr('stroke', lineColor).attr('stroke-width', this.lineWidthForSeries(lineIndex)).attr('stroke-dasharray', this.options.lineStyle); 
 
    }; 
 
}).call(this); 
 

 
var data = [ 
 
    { y: 'LUN', a: 1 }, 
 
    { y: 'MAR', a: 2}, 
 
    { y: 'MER', a: null }, 
 
    { y: 'JEU', a: 2 }, 
 
    { y: 'VEN', a: 1}, 
 
    { y: 'SAM', a: 0}, 
 
    { y: 'DIM', a: 1 } 
 
]; 
 

 
Morris.Area({ 
 
    element: 'chart', 
 
    data: data, 
 
    xkey: 'y', 
 
    ykeys: ['a'], 
 
    //labels: ['Label 1', 'Label 2'], 
 
    fillOpacity: 0.3, 
 
    hideHover: 'auto', 
 
    behaveLikeLine: false, 
 
    resize: true, 
 
    pointFillColors: ['#ffffff'], 
 
    pointStrokeColors: ['black'], 
 
    lineColors: ['blue'], 
 
    lineStyle: "-", 
 
    parseTime: false, 
 
    smooth: false, 
 
    continuousLine: true 
 
}); 
 

 
var indexNulls = []; 
 

 
for (var i = 0; i < data.length; i++) { 
 
    if (data[i].a == null) { 
 
     indexNulls.push(i); 
 
    } 
 
} 
 

 
for (var i = 0; i < indexNulls.length; i++) { 
 
    var circleElement = $("#chart").find("circle")[indexNulls[i]]; 
 
    var divPosition = $(circleElement).attr("cx") - 20; 
 
    var divEdit = $("<div/>").css({ "display": "inline-block", "position": "absolute", "left": divPosition + "px" }); 
 
    var btnEdit = $("<img/>").attr("src", "http://i.stack.imgur.com/Z2AxP.png").addClass("morrisEdit").css({ "cursor": "pointer" }).attr("onclick", "editAction();"); 
 
    divEdit.append(btnEdit); 
 
    $("#edits").append(divEdit); 
 
} 
 

 
function editAction() { 
 
    alert("Edit Clicked"); 
 

 
    // Do some actions 
 
}

<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="http://cdn.oesmith.co.uk/morris-0.5.1.min.js"></script> 
 
<link href="http://cdn.oesmith.co.uk/morris-0.5.1.css" rel="stylesheet"/> 
 

 
<div id="chart"></div> 
 
<div id="edits" style="width: 100%; margin-top: -150px; position: relative;">

Answer 1

Это никогда не было встроенным вариантом в Morris.js. Был continuousLine параметра до версии 0.4.3, которая ломает линию для нулевых значений, но это было только для Line диаграммы, не Area графика:

Morris.Line({ 
 
    element: 'chart', 
 
    data: [ 
 
    { y: '2006', a: 100, b: 30 }, 
 
    { y: '2007', a: 75, b: 40 }, 
 
    { y: '2008', a: null, b: 20 }, 
 
    { y: '2009', a: 75, b: 45 }, 
 
    { y: '2010', a: 50, b: null }, 
 
    { y: '2011', a: 75, b: 65 }, 
 
    { y: '2012', a: 100, b:95 } 
 
    ], 
 
    xkey: 'y', 
 
    ykeys: ['a', 'b'], 
 
    labels: ['Label A', 'Label B'], 
 
    continuousLine: false 
 
});

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

 
<div id="chart"></div>

Вы можете попытаться продлить последнюю версию Morris.js 0.5.1 и изменить код, который рисует линии, но это сложно сделать; Я пробовал без успеха.

Answer 2

документации указывает на то, что атрибут continousLine был удален в v0.5.0 с нулевыми значениями, вызывающими разрыв в строке/диаграмме области (http://morrisjs.github.io/morris.js/lines.html). Однако GitHub показывает, что существует открытая проблема, когда диаграмма области не разбивается на нулевые значения (https://github.com/morrisjs/morris.js/issues/347).