Javascript Morris.js面积图定制

我需要一个类似这样的图表，有人能帮我提供一个关于小提琴的工作示例吗

我目前的代码是：

initCharts: function() {
        if (Morris.EventEmitter) {
            // Use Morris.Area instead of Morris.Line
            dashboardMainChart = Morris.Area({
                element: 'sales_statistics',
                padding: 15,
               // behaveLikeLine: false,
               gridEnabled: true,
               // gridLineColor: false,
                axes: true,
                fillOpacity: 0.3,
                data: [{
                    period: '2011 Q1',

                    profit: 0
                }, {
                    period: '2011 Q2',

                    profit: 20
                }, {
                    period: '2011 Q3',

                    profit: 50
                }, {
                    period: '2011 Q4',

                    profit: 40
                }, {
                    period: '2011 Q4',

                    profit: 60
                }],
                lineColors: ['#91C120'],
                xkey: 'period',
                ykeys: ['profit'],
                labels: ['Profit'],
                xLabels:['week'],
                pointSize: 5,
                pointFillColors: ['#FFF'],
                lineWidth: 3,
                hideHover: 'auto',
                resize: true
            });

        }
    }

第一个问题是我想按类而不是id使用graph目标元素，因为我想在一个页面上多次使用它

第二，我找不到一种方法将上面的图片中的日期放在XLabel上

第三，我希望网格与图像相似

通过向morris传递jQuery或DOM对象，可以使用类而不是id。如果向其传递一个字符串，则它必须是一个id。因此，可以使用如下类：

元素：$（'.yourClass'），

您可以使用

xLabelFormat

选项来使用一周中的几天，如下所示：

xLabelFormat:function（x）{
let day=x.getDay（），
天数=[“太阳”、“星期一”、“星期二”、“星期三”、“星期四”、“星期五”、“星期六”]；
返回天数[天]；
}

可以使用css设置轴的文本颜色，并调整圆的笔划宽度

圆圈{
笔画宽度：4
}
tspan[dy]{
行程：#91C120
}

可在此处查看完整演示：