繁体   English   中英

在Kendo UI Chart Angular 2中隐藏gridLines

[英]Hide gridLines in Kendo UI Chart Angular 2

我正在使用带有Angular 2的Kendo UI Chart,默认情况下该Chart将出现网格线,但我想将其隐藏。 我从API获得了“ GridLines ”类。 但是我在哪里不能使用它。 而且我想隐藏我的X轴。

即将结果: comingResult

预期结果:

预期结果

码:

<kendo-chart>
    <kendo-chart-value-axis>
        <kendo-chart-value-axis-item [title]="{ text: 'Score' }" [min]="0" [max]="11" >
        </kendo-chart-value-axis-item>
    </kendo-chart-value-axis>

    <kendo-chart-series-defaults type="bar">
        <kendo-chart-series-defaults-labels format="">
        </kendo-chart-series-defaults-labels>
    </kendo-chart-series-defaults>

    <kendo-chart-category-axis>
        <kendo-chart-category-axis-item  [categories]="chartObject.skills">
        </kendo-chart-category-axis-item>
    </kendo-chart-category-axis>

    <kendo-chart-series>
        <kendo-chart-series-item color="#337ab7" [data]="chartObject.rates" type="bar" [border]="{ width: 0 }">
        </kendo-chart-series-item>
    </kendo-chart-series>
</kendo-chart>

我隐藏如下的网格线:

<kendo-chart-axis-defaults [majorGridLines]="{ visible : false}">
</kendo-chart-axis-defaults>

删除图表X轴:

<kendo-chart-value-axis>
    <kendo-chart-value-axis-item [line]="{visible:false}" labels="false">
    </kendo-chart-value-axis-item>
</kendo-chart-value-axis>

我通过更改css类的属性来实现此目的,如下所示

.k-var--chart-major-lines {
    background-color:white;
}

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM