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

【问题标题】：How to add color under a single line graph with Morris.js如何使用 Morris.js 在单线图下添加颜色
【发布时间】：2014-10-14 17:32:25
【问题描述】：

我目前正在使用 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);
    }

【问题讨论】：

标签： javascript html css graph morris.js

【解决方案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>

【讨论】：