Morris.js區域圖定制

Question

我需要一個像這樣的圖，有人可以通過在提琴上提供工作示例來幫助我嗎？

我當前的代碼是：

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使用圖形目標元素，因為我想在單個頁面上多次使用它

第二，我找不到將上面的圖片放置在xLabels上的方法

第三，我想要與圖像相似的網格

Answer 1

1. 您可以通過向morris傳遞jQuery或DOM對象來使用類而不是id。 如果將字符串傳遞給它，則它必須是一個ID。 所以你可以使用這樣的類：

element:$('.yourClass'),

2. 您可以使用xLabelFormat選項使用星期xLabelFormat ，如下所示：

xLabelFormat:function(x){day=x.getDay(); days=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"]; return days[day];}

3. 您可以使用CSS設置軸的文本顏色，並調整圓的筆觸寬度

circle{ stroke-width:4 } tspan[dy]{ stroke:#91C120 }

完整的演示可以在這里查看： http : //jsbin.com/nunusopaca/1/