如何使用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>