我用 chart.js 制作的图表每次重新绘制时都会变大,我不知道为什么。 我的图表 cavas 代码是:
let tempChart = document.getElementById("tempChart").getContext('2d');
let pressureChart = document.getElementById("pressureChart").getContext('2d');
let O3Chart = document.getElementById("O3Chart").getContext('2d');
let PM1Chart = document.getElementById("PM1Chart").getContext('2d');
<canvas id="tempChart"></canvas>
<canvas id="pressureChart"></canvas>
<canvas id="O3Chart"></canvas>
<canvas id="PM1Chart"></canvas>
这是我每次绘制或重绘图表时调用的代码:
function createChart(chartLabels, chartData, chart, label, backgroundcolor, beginAtZero, borderColor) {
let LineChart = new Chart(chart, {
type: 'line',
data: {
labels: chartLabels,
datasets: [{
label: label,
data: chartData,
backgroundColor: backgroundcolor,
pointRadius: 0,
borderColor: borderColor
}]
},
options: {
responsive: false,
scales: {
yAxes: [{
ticks: {
beginAtZero: beginAtZero
}
}
]
}
}
})
}
在我运行一次 createChart 之前 Canvas 的 CSS:
width: 45%;
padding: 20px 20px;
border-bottom: 1px solid #dedede;
运行 createChart 后的 CSS:
display: block;
height: 341px;
width: 683px;
我已经针对我的标签和数据使用空数组和完整数组测试了这段代码,在这两种情况下,每次我调用 createChart 函数时图表都会增长。
最佳答案
您使用的库 (chart.js) 似乎默认覆盖了这些 css 值。
一种选择是在 createChart 函数结束时将这些值设置回它们的正确值。
例如:
tempChart.style.width = 45%;
其他选项是在样式表中为它们添加强大功能,!important
,但这取决于 (chart.js) 的行为方式。
关于javascript - Chart.js Canvas 和图表宽度在重绘时被覆盖,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54851670/