代码之家 › 专栏 › 技术社区 › Yevhen Rudenko Dalmoni

角度自定义legenditemcomponent的kendo ui

kendo-ui-angular2 kendo-ui angular

Yevhen Rudenko Dalmoni · 技术社区 · 6 年前

大家早上好。我需要在甜甜圈图表中自定义我的传奇项目。在阅读文档时,我需要定义legenditemVisualArgs对象并初始化createVisualArgs()方法。

在这里,我要展示我的做法:

export class CustomLegendItemViewModel implements LegendItemVisualArgs {
options: any;
pointIndex: any;
sender: ChartComponent;
series: any;

createVisual(): Circle {
    const geometry = new GeomCircle([10, 10], 10);

    return new Circle(geometry);
}

之后,我在角度组件中创建此对象:

export class ChartItemComponent implements OnInit, OnDestroy {
  visual: CustomLegendItemViewModel = new CustomLegendItemViewModel();
}

在HTML代码中,我尝试将自定义图例项视图绑定到对象:

<kendo-chart>
            <kendo-chart-series>
                <kendo-chart-series-item [holeSize]="100"
                        type="donut" [data]="data2" [size]="20"
                        categoryField="kind" field="share">
                </kendo-chart-series-item>
            </kendo-chart-series>
            <kendo-chart-legend [visible]="true">
                <kendo-chart-legend-item [visual]="visual"></kendo-chart-legend-item>
            </kendo-chart-legend>
        </kendo-chart>

我面对的错误是

Uncaught TypeError: customVisual is not a function
at LegendItem.renderVisual (legend-item.js:112)
at LegendLayout.render (legend-layout.js:33)
at Legend.createItems (legend.js:101)
at new Legend (legend.js:27)
at Chart._getModel (chart.js:463)
at Chart._redraw (chart.js:279)
at Chart._noTransitionsRedraw (chart.js:1284)
at Chart._resize (chart.js:134)
at Chart.resize (chart.js:128)
at ChartComponent.push../node_modules/@progress/kendo-angular-charts/dist/es/chart.component.js.ChartComponent.resize (chart.component.js:389)

有人知道我该怎么解决吗?或者只是发送一些自定义示例的引用。

谢谢!

1 回复 | 直到 6 年前

Philipp 6 年前

基于您需要提供的api function 致 visual 输入。( API Reference )

在下面的代码中,我将绑定函数 visualFn 输入 视觉的 是的。( Working example )

HTML格式

<kendo-chart>
    ...
    <kendo-chart-legend [visible]="true">
        <kendo-chart-legend-item [visual]="visualFn"></kendo-chart-legend-item>
    </kendo-chart-legend>
</kendo-chart>

成分

public visualFn(e: SeriesVisualArgs): Group {
    const geometry = new GeomCircle([10, 10], 10);
    return new Circle(geometry);
}

推荐文章

Kiara · 根据条件角度显示多个模板

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Piotr Deja · 如何在subscribe方法中为参数赋值,然后从组件内部的任何位置检索该值?

1 年前

Ben5 · 服务器端总是接触FormControl

1 年前

allforthenoob · 我该怎么分类?

1 年前

Hamid Elouardaoui · 角度生成:发生未处理的异常:服务不再运行

1 年前

Hugh Jones · 如何创建适用于多个来源的自签名开发证书

1 年前

jthorn · 角度对象未在HTML中显示

1 年前

clem · 如何在Angular应用程序中突出显示页面的一部分?

2 年前

Kael · 在html表格中显示关系api数据-角度

2 年前