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