我正在使用带有primeNG的angular2。我想为条形图和饼图设置自定义图例。我想知道如何编写legendTemplate(这是条形图的一个属性)。我的代码看起来像这样(如下所示)
graph.component.html中的代码----
<div class="ui-grid ui-grid-responsive" style="margin-bottom:10px">
<div class="ui-grid-row">
<div class="ui-grid-col-6">
<h3 class="first">Data Collected (By categories)</h3>
<p-pieChart [value]="data2" width="300" height="300" (onSegmentsSelect)="onSegmentClick($event)"
[segmentShowStroke]="false" [animationSteps]="50" animationEasing="easeInOutQuint"
[animateScale]="true" [legend]="Comedy" [legend]="lgnd1" [legendTemplate]="template"></p-pieChart>
</div>
<div #lgnd1></div>
<div class="ui-grid-col-6">
<p-barChart [value]="data" width="640" height="320" [legend]="lgnd"></p-barChart>
<div #lgnd></div>
</div>
</div>
</div>
graphComponent.ts中的代码
constructor() {
this.data2 = [{
value: 125,
color: '#2196F3',
highlight: '#64B5F6',
label: 'Comedy'
},
{
value: 50,
color: '#673AB7',
highlight: '#9575CD',
label: 'Drama'
},
{
value: 75,
color: '#00897B',
highlight: '#26A69A',
label: 'Action'
},
{
value: 22,
color: '#FF9800',
highlight: '#FFB74D',
label: 'Romance'
},
{
value: 100,
color: '#FF5722',
highlight: '#FF8A65',
label: 'Sci-fi'
}];
this.data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
fillColor: '#42A5F5',
strokeColor: '#1E88E5',
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: 'My Second dataset',
fillColor: '#9CCC65',
strokeColor: '#7CB342',
data: [28, 48, 40, 19, 86, 27, 90]
}
]
}
}