javascript - 响应式 chart.js 表现怪异

Question

我第一次尝试使用 Charts.js，并且已经包含了响应选项作为参数之一，但是它的行为有点奇怪。我已将图例标签的字体大小从默认的 12/16 更改为 22，这样它更容易识别，但我似乎无法更改图表（雷达）点标签的字体大小，我已阅读文档但它什么也没做。我的js在下面；

// ::..>> React Js Script here.......................................>> Block 1..
Chart.defaults.global.defaultFontFamily = "Kaushan Script";
 // Chart.defaults.global.defaultFontSize = "19";

let ctx1 = document.getElementById('myChart').getContext('2d');
// Gradient 1.
let gradientX = ctx1.createLinearGradient(220, 345, 478, 222);
    gradientX.addColorStop(0,   'rgba(3, 252, 157, 0.4)');
    gradientX.addColorStop(0.7, 'rgba(5, 99, 132, 0.5)');
    gradientX.addColorStop(1,   'rgba(48, 33, 172, 0.6)');
// Gradient 2.
let gradientY = ctx1.createLinearGradient(220, 345, 478, 222);
    gradientY.addColorStop(0,   'rgba(3, 252, 192, 0.2)');
    gradientY.addColorStop(0.7, 'rgba(5, 244, 148, 0.3)');
    gradientY.addColorStop(1,   'rgba(48, 202, 112, 0.4)');

        let chart = new Chart(ctx1, {
            // The type of chart we want to create
            type: 'radar',

            // The data for our dataset
            data: {
                labels: [
                    'Tickets\nCreated',
                    'Current\nProjects',
                    'Bug\nBounties',
                    'Issues\nSolved',
                    'Active\nMembers',
                    'Online\nUsers',
                    'Completed\nProjects'
                    ],
                datasets: [{
                    label: 'Current Stats',
                    backgroundColor: gradientX,// 'rgba(3, 252, 157, 0.9)', // Old Color ::>> 'rgba(5, 99, 132, 0.7)',
                    borderColor: 'rgba(252, 186, 3, 0.8)',
                    data: [4, 12, 18, 2, 22, 11, 27],
                    },{
                     label: 'User',
                     backgroundColor: gradientY,// 'rgba(3, 252, 157, 0.9)',    // Old Color ::>> 'rgba(5, 99, 132, 0.7)',
                     borderColor: 'rgba(201, 8, 166, 0.8)',
                     data: [44, 9, 18, 33, 4, 2, 27],
                     }]
            },
// ::..>>   Configuration options go here...................................
            options: {
                responsive: true,
                datasetStrokeWidth : 3,
                pointDotStrokeWidth : 4,
                tooltipFillColor: "rgba(0,0,0,0.8)", // Change this.
                legend: {
                    display: true,
                    labels: {
                        fontSize: 28
                    }
                }
            },

            plugins: [{     // This Plugin is Solely for chart.js to recognise \n characters
                beforeInit: function (chart) {
                    chart.data.labels.forEach(function (e, i, a) {
                        if (/\n/.test(e)) {
                            a[i] = e.split(/\n/)
                        }
                    })
                }
            }]              // End of Plugin.........
        });

它也反应灵敏，但方式有点尴尬。在 2560x1440 的大屏幕上，它看起来还不错，当它缩小到移动设备时，字体会变得很大，而图表在中间是一个小亮点。如果我将浏览器的大小从全屏调整为移动设备，则写作开始时很小，然后变大，然后变小，最后在移动设备上变大。有没有办法设置类似于 css 的图表的 min-max 大小。* 或者为图例文本设置 min-max 值，因为这似乎是取代其他所有内容并使图表变小的原因。

我目前没有任何媒体查询（我自己的）附加到包含chart.js的这一部分，所以我不明白它的奇怪行为。附言。它包含的 div 或部分是使用 css calc(428.8px + 2vw) 的正方形；这是响应式的。高度相同，但使用“vh”...

有什么建议么？

标签： javascriptchartsresponsive-designchart.jsresponsive