我正在尝试在选项卡(有角材料)中显示图表js折线图,但是图表未显示,显示为空。
这是我的代码:
HTML:
<mat-tab-group animationDuration="0ms">
<mat-tab label="First">
<div class="chart-container" style="height:50vh;">
<canvas id="demo"></canvas>
</div>
</mat-tab>
<mat-tab label="Second">Content 2</mat-tab>
<mat-tab label="Third">Content 3</mat-tab>
</mat-tab-group>
js文件:
var chartColors = {
test_1: '#fba66c',
test_2: '#86b9ce',
test_3: '#4274fd'
};
var canvas : any = document.getElementById("demo");
var ctx = canvas.getContext("2d");
var test_1_data = [1, 0, 3, 0, 5, 6, 8];
var test_2_data = [5, 1, 8, 0, 3, 6, 5];
var test_3_data = [9, 8, 3, 4, 5, 6, 2];
var lineChartData = {
labels: ['Mon', 'Tue', 'Wed', 'Thu','Fri', 'Sat', 'Sun'],
datasets: [{
label: 'test_1',
borderColor: chartColors.test_1,
backgroundColor: chartColors.test_1,
fill: false,
data: test_1_data ,
yAxisID: 'y-axis-1'
},
{
label: 'test_2',
borderColor: chartColors.test_2,
backgroundColor: chartColors.test_2,
fill: false,
data: test_2_data ,
yAxisID: 'y-axis-1'
},
{
label: 'test_3',
borderColor: chartColors.test_3,
backgroundColor: chartColors.test_3,
fill: false,
data: test_3_data ,
yAxisID: 'y-axis-1'
}
]
};
var demo= Chart.Line(ctx, {
data: demolineChartData,
options: {
responsive: true,
hoverMode: 'index',
stacked: false,
maintainAspectRatio: false,
title: {
display: true,
text: 'Last updated at : '+ new Date().toLocaleString()
},
scales: {
yAxes: [{
ticks:{
min: 0,
max:15,
stepSize:3
},
type: 'linear',
position: 'left',
id: 'y-axis-1'
}],
}
}
});
我使用了有角材料中的选项卡和图表js中的图表。我尝试了很多方法,但没有任何效果,该怎么办。
谢谢。
答案 0 :(得分:0)
您应该将图表初始化为ngOnInit方法。 您可以创建一个实例化图表的函数:
chart.ts:
export const myChart = () => {
var chartColors = {
test_1: '#fba66c',
test_2: '#86b9ce',
test_3: '#4274fd'
};
var canvas : any = document.getElementById("demo");
var ctx = canvas.getContext("2d");
var test_1_data = [1, 0, 3, 0, 5, 6, 8];
var test_2_data = [5, 1, 8, 0, 3, 6, 5];
var test_3_data = [9, 8, 3, 4, 5, 6, 2];
var lineChartData = {
labels: ['Mon', 'Tue', 'Wed', 'Thu','Fri', 'Sat', 'Sun'],
datasets: [{
label: 'test_1',
borderColor: chartColors.test_1,
backgroundColor: chartColors.test_1,
fill: false,
data: test_1_data ,
yAxisID: 'y-axis-1'
},
{
label: 'test_2',
borderColor: chartColors.test_2,
backgroundColor: chartColors.test_2,
fill: false,
data: test_2_data ,
yAxisID: 'y-axis-1'
},
{
label: 'test_3',
borderColor: chartColors.test_3,
backgroundColor: chartColors.test_3,
fill: false,
data: test_3_data ,
yAxisID: 'y-axis-1'
}
]
};
var demo= Chart.Line(ctx, {
data: demolineChartData,
options: {
responsive: true,
hoverMode: 'index',
stacked: false,
maintainAspectRatio: false,
title: {
display: true,
text: 'Last updated at : '+ new Date().toLocaleString()
},
scales: {
yAxes: [{
ticks:{
min: 0,
max:15,
stepSize:3
},
type: 'linear',
position: 'left',
id: 'y-axis-1'
}],
}
}
});
}
然后将其导入您的组件中:
...
ngOnInit() {
myChart();
}
...
注意:请记住,您可以将chart.js库直接导入到您的组件中,并使用它。
希望工作流程对您有帮助。