angular-chart.js，Chart.js v2图例定制。怎么样？

Question

在文档中有legendCallback和generateLabels，我不太了解文档。鉴于我的代码如下。如何更改图例以使其成为每行一个图例，背景和折线图图例应该看起来像一条线而不是条形图或简称如何自定义图例。

JS：

vm.labels = ['2015 - Aug', '2015 - Sept', '2015 - Oct', '2015 - Nov', '2015 - Dec', '2016 - Jan',
    '2016 - Feb', '2016 - Mar', '2016 - April', '2016 - May', '2016 - Jun', '2016 - Jul', '2016 - Aug',
];
vm.series = [
    'A',
    'B',
];
vm.data = [
    [14, 12, 17, 24, 29, 17, 23, 10, 16, 20, 33, 5, 8],
    [50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
];

vm.colors = [
    {
        backgroundColor: 'rgba(0,104,26,1)',
        borderColor: 'rgba(0,104,26,1)',
    },
    {
        backgroundColor: 'rgba(56,80,143,1)',
        borderColor: 'rgba(56,80,143,1)',
    },
];

vm.options = {
    scales: {
        xAxes: [
            {
                ticks: {
                    callback: function (value) {
                        var values = value.split(' ');
                        var date = [values[0], values[2]];
                        return date;
                    },
                },
            },
        ],
        yAxes: [
            {
                ticks: {
                    max: 100,
                    min: 0,
                    step: 20,
                    callback: function (value) {
                        return value + '%';
                    },
                },
            },
        ],
    },

    // legend
    legend: {
        display: true,
        position: 'bottom',
    },

    // title
    title: {
        display: true,
        text: 'Chart',
        fontSize: 15,
    },

    // hover
    hover: {
        mode: 'single',
    },

    // tooltips
    tooltips: {
        enabled: true,
        mode: 'single',
        callbacks: {
            title: function (tooltipItems, data) {
                var idx = tooltipItems[0].datasetIndex;
                var year = tooltipItems[0].xLabel[0];
                var month = tooltipItems[0].xLabel[1];
                if (idx === 0) {
                    return year + '-' + month;
                } else {
                    return '';
                }
            },

            label: function (tooltipItems, data) {
                var idx = tooltipItems.datasetIndex;
                var dataidx = tooltipItems.index;
                var seriesValue = data.datasets[idx].label;
                var value = data.datasets[idx].data[dataidx];
                if (idx === 0) {
                    return seriesValue + ': ' + value + '%';
                } else {
                    return seriesValue + ' (' + value + '%)';
                }
            },
        },
    },
};

vm.datasetOverride = [];
for (var i = 0; i < vm.series.length; i++) {
    vm.datasetOverride.push(
        {
            lineTension: 0,
            fill: false,
            pointStyle: 'circle',
            pointRadius: 0,
            pointHoverRadius: 4,
            pointHitRadius: 10,
            type: 'line',
        }
    );
}

vm.datasetOverride[1].borderDash = [5, 1];

HTML

<canvas id="line" 
        class="chart chart-line" 
        chart-data="vm.data"
        chart-labels="vm.labels" 
        chart-series="vm.series" 
        chart-options="vm.options"
        chart-colors="vm.colors"
        chart-dataset-override="vm.datasetOverride"></canvas> 

目前：