如何使用primeNG在angular2中编写图例模板

时间:2016-05-27 06:43:08

标签: angular chart.js

我正在使用带有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]
                }
            ]
        }
}

0 个答案:

没有答案