4

我有一个基于模型设计的图表,但是模型图表使用了图例 pointStyles 的自定义图标,基本上我在图表 JS 本身中找不到它们,我尝试了不同类别的 pointStyle,例如('rect' , 'clearRect') 但它们都有不同的样式。所以基本上我的问题是我们如何为图表pointStyle提供自定义图标/设计。

样机图:

在此处输入图像描述

我的图表:

在此处输入图像描述

我的图表 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
            }
        },
    }
});
4

0 回答 0