响应式charts.js表现怪异

我正在尝试第一次使用Charts.js, &已将“响应”选项作为参数之一, 但是它的表演有点奇怪。我改变了字体大小 图例标签从默认的12/16到22, 为了使它更容易理解,但是我似乎无法更改图表(Radar)点标签的字体大小,我已经阅读了文档,但没有做任何事情。 我的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,222);
    gradientY.addColorStop(0,192,0.2)');
    gradientY.addColorStop(0.7,244,148,0.3)');
    gradientY.addColorStop(1,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,0.9)',// Old Color ::>> 'rgba(5,0.7)',borderColor: 'rgba(252,186,3,0.8)',data: [4,12,18,2,22,11,27],},{
                     label: 'User',backgroundColor: gradientY,borderColor: 'rgba(201,8,166,data: [44,9,4,}]
            },// ::..>>   Configuration options go here...................................
            options: {
                responsive: true,datasetStrokeWidth : 3,pointDotStrokeWidth : 4,tooltipFillColor: "rgba(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值,因为这似乎是在替换所有其他内容并使图表变小。

我目前没有包含该chart.js的任何媒体查询(属于我本人),因此我不理解其奇怪的行为。 ps。其包含的div或section是使用CSS的正方形 calc(428.8px + 2vw);哪个响应。高度相同,但带有“ vh” ...

有什么建议吗?

rayest 回答:响应式charts.js表现怪异

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/3107279.html

大家都在问