用于 Angular 自定义 LegendItemComponent 的 kendo-ui答案

【问题标题】：kendo-ui for Angular customizing LegendItemComponent用于 Angular 自定义 LegendItemComponent 的 kendo-ui
【发布时间】：2018-07-03 08:15:42
【问题描述】：

大家早上好。我需要在圆环图中自定义我的图例项。正如我在文档中阅读的那样，我需要定义 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)

有人知道我该如何解决吗？或者只是发送一些对自定义示例的参考。

谢谢！

【问题讨论】：

基于docs，您需要向visual 输入提供function，但您提供的是对象/类。
telerik.com/kendo-angular-ui/components/charts/api/… 这是 Angular 框架的文档：视觉类型 - 是对象。看起来你找到了 jQuery 的 kendo-ui。我正在使用 Angular
当我打开您提供的链接时，我看到visual 需要function。（类型：(e: LegendItemVisualArgs) => Element）

标签： angular kendo-ui kendo-ui-angular2

【解决方案1】：

根据 API，您需要为 visual 输入提供 function。 (API Reference)

在下面的代码中，我将函数visualFn 绑定到输入visual。 (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);
}

【讨论】：

【解决方案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>

【讨论】：