我有一个组件来显示我的产品的详细信息我在组件中使用了一个水平条形图，但是当我查看其他产品时，它会保留之前的字符条，新条将附加到它上面。我试图将图表条形值设为空，并且我删除了 artingArr 但它不起作用如何在产品数据更改时重置图表并重新绘制它？
我的图表是这样的：在 ngAfterinit() 中：
for (let rate of this.product.product_ratings) {
this.sum += rate.rating;
this.ratingArr.push(rate.rating);
let n = this.product.product_ratings.length;
let nn = this.sum / n;
this.product.peopleCount = n;
this.product.between = Math.round(nn * 10) / 10;
}
new Chart(<HTMLCanvasElement>document.getElementById("user-rev-chart"), {
type: 'horizontalBar',
data: {
labels: ["5 star", "4 star", "3 star", "2 star", "1 star"],
datasets: [
{
fill: true,
label: false,
backgroundColor: ["#a1a7b3", "#a1a7b3", "#a1a7b3", "#a1a7b3", "#a1a7b3"],
data: [this.fivestar, this.fourstar, this.threestar, this.twostar, this.onestar]
}
]
},
options: {
maintainAspectRatio: false,
responsive: false,
legend: {display: false},
title: {
display: false,
text: ''
},
scales:
{
yAxes: [{
// barPercentage: 0.4,
barThickness: 20,
barPercentage: .5,
categoryPercentage: .2,
isFixedWidth: true,
//Number - Pixel width of the bar
barWidth: 20,
gridLines: {
display: false
},
ticks: {
min: 0,
stepSize: 1,
fixedStepSize: 1,
}
}],
xAxes: [{
display: false,
gridLines: {
display: false
},
ticks: {
min: 0,
stepSize: 1,
fixedStepSize: 1,
}
}],
}
}
});
ngInit():
ngOnInit() {
if (this.isActive() && this.auth.isAuthenticated()) {
this.changeCaptcha();
}
this.all = null;
this.cur = null;
this.onestar = null;
this.twostar = null;
this.threestar = null;
this.fourstar = null;
this.fivestar = null;
this.ratingArr = [];
}
您必须获得 2d 上下文。
模板 ：
<div class="chart-container" fxFlex="80">
<canvas id="currency"></canvas>
</div>
成分：
private displayCurrencyGraph(currencyEntry: CurrencyEntry) {
const currencyCanvas: any = document.getElementById('currency');
const currencyCanvasContext = currencyCanvas.getContext('2d');
ChartBuilder.buildChartLine(currencyCanvasContext,this.data );
}
图表生成器：
static buildChartLine(canvasContext, data){
new Chart(canvasContext, {
type: 'line',
data: {data}
}
从您的代码中，您缺少getContext('2d')来自画布的电话。如果您添加它，它应该可以工作。
您必须在上下文上调用 destroy() 方法，然后分配新的数据集。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句