在 Kendo UI 图表中隐藏网格线 Angular 2

Question

我正在使用 Kendo UI 图表和 Angular 2，默认情况下，图表会出现网格线，但我想隐藏它。我从 API 得到了 class，它是“GridLines”。但是我没有得到在哪里使用它。而且我还想隐藏我的 X 轴。

即将到来的结果：

预期结果：

代码：

<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>

Answer 1

我隐藏了如下网格线：

<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>

Answer 2

我通过改变 css class 的属性实现了这一点，如下所示

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

在 Kendo UI 图表中隐藏网格线 Angular 2

Hide gridLines in Kendo UI Chart Angular 2

kendo-chart

kendo-ui-angular2

angular