본문 바로가기
javascript

[Morriss.js] 그래프에서 legend 만들기

by 바나냥 2020. 6. 8.
var graph1 = Morris.Line({
              element: 'graph1',
              data: [{
                "month": '01',
                "a": 60000000,
                "b": 55000000,
                "c": 37000000,
                "d": 33000000
              }, {
                "month": '02',
                "a": 63000000,
                "b": 58000000,
                "c": 43000000,
                "d": 38000000
              }, {
                "month": '03',
                "a": 65000000,
                "b": 57000000,
                "c": 38000000,
                "d": 40000000
              }, {
                "month": '04',
                "a": 68000000,
                "b": 57000000,
                "c": 32000000,
                "d": 30000000
              }, {
                "month": '05',
                "a": 70000000,
                "b": 62000000,
                "c": 35000000,
                "d": 32000000
              }, {
                "month": '06',
                "a": 71000000,
                "b": 64000000,
                "c": 40000000,
                "d": 36000000
              }, {
                "month": '07',
                "a": 72000000,
                "b": 65000000,
                "c": 47000000,
                "d": 45000000
              }, {
                "month": '08',
                "a": 73000000,
                "b": 66000000,
                "c": 56000000,
                "d": 52000000
              }, {
                "month": '09',
                "a": 74000000,
                "b": 68000000,
                "c": 67000000,
                "d": 64000000
              }, {
                "month": '10',
                "a": 75000000,
                "b": 73000000,
                "c": 78000000,
                "d": 76000000
              }, {
                "month": '11',
                "a": 76000000,
                "b": 74000000,
                "c": 57000000,
                "d": 54000000
              }, {
                "month": '12',
                "a": 78000000,
                "b": 76000000,
                "c": 60000000,
                "d": 57000000
              }],
              xkey: 'month',
              parseTime: false,
              ykeys: ['a', 'b', 'c', 'd'],
              labels: ['그래프명', '전년도 그래프명', '그래프명', '전년도 그래프명'],
              resize: true,
              pointSize: 3,
              smooth: true,
              gridTextColor: '#bcbcbc',
              gridLineColor: '#eef0f2',
              goalLineColors: '#e3e6ea',
              gridTextFamily: Config.get('fontFamily'),
              gridTextWeight: '300',
              numLines: 9,
              gridtextSize: 10,
              lineWidth: 1,
              lineColors: [Config.colors("primary", 600), "#90C5F0", "#e38300", "#F1CFAC"],
            });

            graph1.options.labels.forEach(function(label, i){
                var legendItem = $('<span></span>').css('background-color', graph1.options.lineColors[i]);
                $('#graph1_legend').append(legendItem).append(label);
            });

댓글