как дать индивидуальный дизайн (иконки) для пункта Стиль диаграммы js легенды? - PullRequest
3 голосов
/ 18 февраля 2020

У меня есть диаграмма, которая разработана на основе макета, но на схеме макета использовались пользовательские значки для легенды pointStyles, которые в принципе я не мог найти их на самой диаграмме JS, я пробовал разные классы pointStyle лайк ('rect', 'clearRect'), но все они имеют разные стили. поэтому в основном мой вопрос заключается в том, как мы можем дать пользовательские значки / дизайн для диаграмм pointStyle.

Диаграмма макета:

enter image description here

Мой график:

enter image description here

Мой график JS:

new Chart(document.getElementById("report-chart"), {
    type: 'line',
    data: {
        labels: chartData.label,
        datasets: [{
            label: 'FMV INSTALLED',
            data: chartData.data.fmvI,
            borderColor: "#69bd45",
            fill: false,
            borderWidth: 2,
            pointStyle: 'clearRect'

        }, {
            label: 'EXCHANGE',
            data: chartData.data.fmv,
            borderColor: "#f18e35",
            borderDash: [2, 2],
            fill: false,
            pointStyle: 'rect'

        }, {
            label: 'ORDERLY',
            data: chartData.data.olv,
            borderColor: "#a62061",
            fill: false,
            // borderWidth: 20,
        }, {
            label: 'FORCED',
            data: chartData.data.flv,
            borderColor: "#64cdf3",
            fill: false,
            borderWidth: 1,
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    // Include a dollar sign in the ticks
                    callback: function(value, index, values) {
                        return '$' + value;
                    }
                }
            }],
            xAxes: [{
                position: 'top'
            }]
        },
        legend: {
            display: true,
            position: 'bottom',
            labels: {
                useLineStyle: true,
                usePointStyle: true
            }
        },
    }
});
...