如何使用Morris.js在单个折线图下添加颜色

Question

我目前正在使用Morris.js为Android应用程序绘制图形。 我传入包含1个单行的点的数据。捐赠和日期。我试图在线图的底部添加颜色，但无法弄清楚如何做到这一点。

这是我试图复制的风格。

但是在一条线下。

我已经编辑了Morris.js代码，并且向Morris.Line传递了许多不同的选项，但无济于事。这是我用来设置图表的代码。我认为'fillOpacity'选项可以工作，但事实并非如此。我有遗失的选择吗？或者我已经过了一个重复的答案？

    var xKey = "day"
    var yKey = 'funds'
    var jsonData

    var graph = Morris.Line({
            element: 'graph',
            data: jsonData,
            xkey: xKey,
            ykeys: [yKey],
            labels: ['funds gathered'],
            smooth: true,
            resize: true,
            parseTime: true,
            grid: false,
            fillOpacity: true
        });

    function setGraph(data) {
        graph.setData(data);
    }

Answer 1

好的问题是，在上面的例子中，我试图实例化一个Morris.Line，实际上我想要的是一个Morris.Area。

<script>
    var xKey = "day"
    var yKey = 'funds'
    var jsonData

    var graph = Morris.Area({
            element: 'graph',
            data: jsonData,
            xkey: xKey,
            ykeys: [yKey],
            labels: ['funds gathered'],
            smooth: true,
            resize: true,
            parseTime: true,
            grid: false
        });

    function setGraph(data) {
        graph.setData(data);
    }
</script>