图表组件中的共享工具提示不会出现

问题描述 投票:0回答:1

在图表中,我希望从多个窗格中获得共享工具提示,但它不会出现。元素仅突出显示

我留下我的代码

    <kendo-chart *ngIf="series.length >0">
        <kendo-chart-value-axis>
            <kendo-chart-value-axis-item *ngFor="let item of values; trackBy: item?.name" [name]="item.name" [pane]="item.pane" [visible]="false">
            </kendo-chart-value-axis-item>
        </kendo-chart-value-axis>
        <kendo-chart-panes>
            <kendo-chart-pane *ngFor="let item of panes; trackBy: item?.name" [height]="ALTURA" [name]="item.name" [clip]="false" [margin]="{ top: 27, bottom: 9 }"
                [border]="{ color: '#B6B6B6', width: 0 }"></kendo-chart-pane>
        </kendo-chart-panes>
        <kendo-chart-category-axis>
            <kendo-chart-category-axis-item *ngFor="let item of categories; trackBy: item?.name" baseUnit="days" [max]="dataFim" [min]="dataInicio" [name]="item.name"
                [pane]="item.pane" type="date" [visible]="false" [majorGridLines]="{width:0.5}">
                <kendo-chart-category-axis-item-crosshair [visible]="true">
                    <kendo-chart-category-axis-item-crosshair-tooltip [visible]="true"></kendo-chart-category-axis-item-crosshair-tooltip>
                </kendo-chart-category-axis-item-crosshair>
            </kendo-chart-category-axis-item>
            <kendo-chart-category-axis-item-labels visible="true">
            </kendo-chart-category-axis-item-labels>
        </kendo-chart-category-axis>
        <kendo-chart-legend [visible]="true" position="custom" orientation="horizontal" offsetX=100></kendo-chart-legend>
        <kendo-chart-area [width]="WIDTH" [height]="HEIGHT_TOTAL" [margin]="{bottom:0, top:0, left: 0, right: MARGIN}"></kendo-chart-area>
        <kendo-chart-series>
            <kendo-chart-series-item *ngFor="let item of series; trackBy: item?.name" [data]="item.data" [axis]="item.axis" [categoryAxis]="item.axis" categoryField="date"
                [color]="item.color" [aggregate]="lastValue" [name]="item.name" [type]="item.type" field="value" [missingValues]="interpolate"
                [errorLowField]="low" [errorHighField]="high">
                <kendo-chart-series-item-markers [visible]="true" [border]="{'color':checkLimitsColors(item.minimo, item.maximo, value, item.color)}">
                </kendo-chart-series-item-markers>
            </kendo-chart-series-item>
        </kendo-chart-series>
    <kendo-chart-tooltip [visible]="true" [shared]="true"></kendo-chart-tooltip>
    </kendo-chart>
kendo-ui-angular2 kendo-tooltip
1个回答
0
投票

使用下面的代码,我能够在图表<kendo-chart-series-item-tooltip format="{0}">上显示标签工具提示。

数据:

private seriesData: number[] = [15, 20, 33, 50];
private xAxisData: number[] = ['New', 'Old', 'Sold', 'Purchase'];  

HTML:

<kendo-chart >
<kendo-chart-legend position="top" [visible]="true"></kendo-chart-legend> 

<kendo-chart-series> 
<kendo-chart-series-item   type="column" [name]="'Series-1'" [data]="seriesData" >  
    <kendo-chart-series-item-labels [visible]="true" format="n">
    </kendo-chart-series-item-labels>
    <kendo-chart-series-item-tooltip format="{0}">                
    </kendo-chart-series-item-tooltip>
</kendo-chart-series-item>  
</kendo-chart-series>

<kendo-chart-value-axis>
<kendo-chart-value-axis-item [visible]="true">      
</kendo-chart-value-axis-item>
</kendo-chart-value-axis>

<kendo-chart-category-axis>
    <kendo-chart-category-axis-item [categories]="xAxisData" >
        <kendo-chart-category-axis-item-labels [visible]="true" >
        </kendo-chart-category-axis-item-labels>
    </kendo-chart-category-axis-item>           
</kendo-chart-category-axis>
</kendo-chart>    
© www.soinside.com 2019 - 2024. All rights reserved.