用于自定义图例的角度ngx-charts选项? [英] Angular ngx-charts options for customizing the Legend?

问题描述

我目前在Angular2中使用ngx-charts，我想自定义一些图例，例如将图例放在图表下方，或重命名图例字段，或扩大图例的范围(文本的一部分会被切除.)等等.

I am currently using ngx-charts for Angular2, and I would like to customize some legends, e.g. place the legend below the chart, or rename the legend fields, or make the legend wider (parts of the text just gets cut off..) etc.

有什么好的选项可以自定义图例?还是通常不可能，或者最好的方法是什么? 目前，我的图表图例如下所示:

Are there any good options to customize the legend? Or is it generally not possible, or what is the best way to do it? Currently, my chart legends look like this:

有些图例太宽，有些图例被切除，我想将图例放置在图表下方，例如...

Some legends are too wide, some are cut off, and I'd like to position the legend e.g below the chart...

推荐答案

传奇位置

要将图例放置在图表下方，可以使用legendPosition输入:

<ngx-charts-chart [legendPosition]="'below'" [results]="chartData" [legend]="true"></ngx-charts-chart>

legendPosition的唯一选项是正确"(默认)和下方".

The only options for legendPosition are 'right' (default) and 'below'.

似乎没有自定义图例字段的选项(高级饼图中有更多可自定义的图例，但您的示例是其他类型的图.)我认为最好的解决方法是传递字段标题完全按照您希望它们出现在图例中的方式输入到chartData的chartData[i].name值，然后自定义工具提示以在其中显示不同的字段名称.

There don't seem to be options for customizing the legend fields (there's a more customizable legend in the advanced pie chart, but your examples are other kinds of charts.) I think the best workaround would be to pass the field titles into your chartData's chartData[i].name values exactly as you want them to appear in the legend, and then customize your tooltip(s) to show a different field name there.

此答案提供了有关如何自定义工具提示的概述.然后，我将一个示例与一个折线图放在一起.看起来像默认工具提示，只是带有不同的字段名称:

This answer gives an overview of how to customize tooltips. From there, I put together an example with a line chart that will look like the default tooltips except with a different field name:

<ngx-charts-line-chart [legendPosition]="'right'" [results]="chartData" [legend]="true">
    <ng-template #tooltipTemplate let-model="model">
        <xhtml:div class="area-tooltip-container">
            <span class="tooltip-label">{{ formatFieldName(model.series) }} • {{ formatXvalue(model.name) }}</span>
            <span class="tooltip-val">{{ formatYvalue(model.value) }}</span>
        </xhtml:div>
    </ng-template>
    <ng-template #seriesTooltipTemplate let-model="model">
        <xhtml:div class="area-tooltip-container">
            <xhtml:div *ngFor="let tooltipItem of model" class="tooltip-item">
                <span class="tooltip-item-color" [style.background-color]="tooltipItem.color">
                </span>
                {{ formatFieldName(tooltipItem.series) }}: {{ formatYvalue(tooltipItem.value) }}
            </xhtml:div>
        </xhtml:div>
    </ng-template>
</ngx-charts-line-chart>

更改图例宽度

图例宽度是在其他图表扩展的ngx-charts-chart组件中计算的.它将宽度设置为图表容器的大约1/6或1/12，具体取决于您的数据类型.无法为此图例输入不同的宽度，因此最简单的解决方案是在自动宽度不适合您时将legendPosition设置为以下".

Change Legend Width

The legend width is calculated in the ngx-charts-chart component that the other charts extend. It will set the width to about 1/6th or 1/12th of the chart container, depending on your data type. There is no way to input a different width to this legend, so your easiest solution is to set legendPosition to 'below' when the automatic width doesn't work for you.

但是，您不需要使用图表中内置的图例！这是一个更复杂(但更易于调整)的替代方法:在图表中设置[legend]="false"，然后在图表外部添加一个新的ngx-charts-legend组件.

However, you don't need to use the legend built into the chart! Here's a more complex (but more fine-tune-able) alternative: set [legend]="false" in your chart, and then add a new ngx-charts-legend component outside of the chart.

您可以为此外部图例输入宽度和高度，也可以将其包装在一个div中，以更灵敏地处理尺寸.使用后一种方法时，我必须将图例的宽度设置为其容器的100％.

You can either input width and height to this external legend, or wrap it in a div that handles sizing more responsively. I had to set the legend's width to 100% of its container when using the latter method.

要使此解决方案生效，您必须将外部图例激活事件绑定到图表，并在init上设置一些图例输入属性.在包含图表的组件中，您将需要以下内容:

To get this solution working, you have to bind the external legend activation events to the chart, and set some of the legend input properties onInit. In the component that contains your chart, you'll need something like this:

import { ColorHelper } from '@swimlane/ngx-charts';
...
export class ChartContainerComponent implements OnInit {
    public activeEntries: any[];
    public chartData: { name: string, series: { name: string, value?: string | number }[] }[];
    public chartNames: string[];
    public colors: ColorHelper;
    public colorScheme = { domain: ['#0000FF', '#008000'] }; // Custom color scheme in hex

    public legendLabelActivate(item: any): void {
        this.activeEntries = [item];
    }

    public legendLabelDeactivate(item: any): void {
        this.activeEntries = [];
    }

    public ngOnInit(): void {
        // Get chartNames
        this.chartNames = this.chartData.map((d: any) => d.name);
        // Convert hex colors to ColorHelper for consumption by legend
        this.colors = new ColorHelper(this.colorScheme, 'ordinal', this.chartNames, this.colorScheme);
    }

然后我的模板(图表和图例各占一半的宽度)如下:

Then my template (with chart and legend each taking half of the width) looks like:

<div fxLayout="row">
    <div fxFlex="50%">
        <ngx-charts-line-chart [legend]="false" [activeEntries]="activeEntries" [results]="chartData" [scheme]="colorScheme"></ngx-charts-line-chart>
    </div>
    <div fxFlex="50%">
        <ngx-charts-legend fxFlex="100%" class="chart-legend" [data]="chartNames" [title]="'Legend Title'" [colors]="colors" (labelActivate)="legendLabelActivate($event)" (labelDeactivate)="legendLabelDeactivate($event)"></ngx-charts-legend>
    </div>
</div>

这篇关于用于自定义图例的角度ngx-charts选项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！