![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/23220addf191a5ae5b2282fd63e798e2.png#pic_center)
<canvas class="full-height info"
[chartType]="chartTemplate.chartType"
[datasets]="chartTemplate.chartData"
[labels]="chartTemplate.chartLabels"
[options]="chartTemplate.chartOptions"
[legend]="chartTemplate.chartlegend"
>
</canvas>
chartTemplate = {
chartOptions : {
title: {
display: true,
padding:15,
text: ['Rotation deg','Extention %','Bend deg'],
fontSize:14,
position:'left',
fontColor:'#6f7173',
fontFamily:'Arial',
fontStyle:'normal'
},
scaleShowVerticalLines: false,
responsive: true,
animation: false,
scales: {
yAxes: [{
id: 'Rotation',
type: 'linear',
position: 'left',
ticks: {
max: 20,
stepSize:5,
fontColor:'#0000ff',
min:-20
},
gridLines: {
display: true,
color:"#2b323b"
}
}, {
id: 'Extention',
type: 'linear',
position: 'left',
borderColor:'#f00',
ticks: {
max: 10,
stepSize:0.5,
fontColor:'#00cd00',
min: 0
},
gridLines: {
display: false,
}
},
{
id: 'Bend',
type: 'linear',
position: 'left',
ticks: {
max:15,
stepSize:2,
fontColor:'#ff3030',
min: -10
},
gridLines: {
display: false,
}
}
]
},
legend: {
display: true,
position:'top',
fullWidth:true,
labels:
{
fontSize: 18,
fontColor:'#797a7b',
fontFamily:'Arial',
boxWidth:9,
usePointStyle: true,
padding:40
},
}
},
chartData : [
{
data: [0,0,0,0,0,0,0,0],
label: 'Rotation',
backgroundColor: [
'transparent'
],
yAxisID: 'Rotation',
pointRadius: 0,
pointHoverRadius: 0,
borderColor: [
'rgba(0, 0, 254,1)'
],
pointBackgroundColor: [
'rgba(0, 0, 254,1)'
],
borderWidth: 0,
},
{
data: [0,0,0,0,0,0,0,0],
label: 'Extention',
yAxisID: 'Extention',
backgroundColor: [
'transparent'
],
pointRadius: 0,
pointHoverRadius: 0,
borderColor: [
'rgba(0, 205, 0,1)'
],
pointBackgroundColor: [
'rgba(0, 205, 0,1)'
],
borderWidth: 0,
},
{
data: [0,0,0,0,0,0,0,0],
label: 'Bend',
yAxisID: 'Bend',
backgroundColor: [
'transparent',
],
pointRadius: 0,
pointHoverRadius: 0,
borderColor: [
'rgba(231, 0, 18,1)'
],
pointBackgroundColor: [
'rgba(231, 0, 18,1)'
],
borderWidth: 0,
},
],
chartlegend:true,
chartType: 'line',
chartLabels: [],
}