angular 5在同一组件中重置图表js条
angular 5在同一组件中重置图表js条
提问于 2018-06-07 22:54:06
我有一个组件来显示我的产品的详细信息，我在组件中使用了一个horizontalBar图表，但当我查看其他产品时，它会保留以前的字符条形图，新的条形图会附加到它上面。我尝试将图表条形值设为空，也删除了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 = [];
}回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-07 23:52:37
您必须获得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 );
}ChartBuilder：
static buildChartLine(canvasContext, data){
new Chart(canvasContext, {
type: 'line',
data: {data}
}在您的代码中，您缺少画布中的getContext('2d')调用。如果你添加了这一点，它应该可以工作。
必须对上下文调用destroy()方法，然后分配新的dataset。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50744328
复制相关文章
相似问题