kendo-ui for Angular customizing LegendItemComponent

Question

大家早上好。我需要在圆环图中自定义我的图例项。 当我在文档中阅读时，我需要定义 LegendItemVisualArgs 对象并初始化 createVisual(( 方法。

在这里，我展示了我完成它的方式：

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);
}

之后，我在 Angular 组件中创建此对象：

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)

有人有任何想法如何解决吗？或者只是发送一些对自定义示例的引用。

谢谢！

Answer 1

根据 API，您需要提供对visual输入的function。(接口参考(

在下面的代码中，我将函数visualFn绑定到输入visual。(工作示例(

.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);
}

Answer 2

我可以像这样在角度上实现这一点。基于 jquery 版本 -> http://dojo.telerik.com/iliGOJ/7

元件

public visualFn(e: SeriesVisualArgs): Layout {
var color = e.options.markers.background;
var labelColor = e.options.labels.color;
var rect = new Rect([0, 0], [100, 50]);
var layout = new Layout(rect, {
spacing: 5,
alignItems: "center"
});
var circleGeometry = new GeomCircle([0, 10], 4);
var circle = new Circle(circleGeometry, {
stroke: { color: "none" },
fill: {color: color}
});
var marker = circle;
var label = new Text(e.series.name, [0, 0], {
fill: { color: labelColor }
});
layout.append(marker, label);
layout.reflow();
return layout;
}

.html

<kendo-chart-legend position="bottom" [offsetX]="200">
<kendo-chart-legend-item [visual]="visualFn"></kendo-chart-legend-item>
</kendo-chart-legend>