我正在尝试第一次使用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” ...
有什么建议吗?