使用Morris.js跳过空值 [英] Skipping null values with Morris.js

问题描述

我正在使用Morris.js绘制面积图. 我的数据声明如下:

I'm using Morris.js to plot an area chart. My data is declared as follow:

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绘制此数据时，得到以下图表:

When I plot this data using Morris I got the following chart:

代码源基于以下询问的问题:

The code source is based on the following asked question:

向图表添加按钮-svg

我的问题是:是否可以跳过空值而不绘制它们?

My question is: is it possible to skip the null values and not plotting them ?

如果我们跳过空值，则图表将如下图所示:

If we skip the null values the chart will be like the following picture:

这是一个有效的代码:

(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;">

推荐答案

这从来不是Morris.js中的内置选项.在版本0.4.3之前存在一个continuousLine参数，该参数中断了空值行，但这仅用于Line图表，而不是Area图表:

This was never a built-in option in Morris.js. There was a continuousLine parameter until version 0.4.3 that breaks the line for null values, but it was only for the Line chart, not the Area chart:

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并修改绘制界线的代码，但这很难实现.我尝试没有成功.

You can try to extend the latest Morris.js version 0.5.1 and modify the code that draw the lines, but it's a difficult one to achieve; I tried without success.

这篇关于使用Morris.js跳过空值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！