在 Kendo UI Chart Angular 2 中隐藏网格线

Posted 2023-05-09

【中文标题】在 Kendo UI Chart Angular 2 中隐藏网格线

【英文标题】：Hide gridLines in Kendo UI Chart Angular 2

【发布时间】：2017-02-26 11:36:05

【问题描述】：

我正在使用带有 Angular 2 的 Kendo UI Chart， 图表默认网格线即将到来，但我想隐藏它。我从 API 获得了“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>

【参考方案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>

【讨论】：

@alexGyoshev，感谢您的正确缩进。 :)

【参考方案2】：

我通过改变 CSS 类的属性来实现这一点，如下所示

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

【讨论】：

是的，确实，我们可以实现它，但我想知道 Kendo UI 方法。谢谢你的帮助。 :)

虽然这将设置网格线颜色，但最好使用提供的 SASS 变量并编译主题。这样，您可以设置 $chart-major-lines: #fff; 来修改主题，而不是通过 CSS 覆盖它。

是的，现在我正在使用 SASS 变量而不是覆盖，感谢您的帮助