时间戳

首页 > 解决方案 > 如何更改 Angular 2+ 剑道迷你图的条形颜色

angular - 如何更改 Angular 2+ 剑道迷你图的条形颜色

问题描述

我有一个剑道迷你图，角度 2 的子弹图。条形的默认颜色是橙色，但我需要更改颜色。我查看了进度站点上的参考资料，似乎值轴有一个颜色属性，但是当我尝试更改它时，条形消失了。

html

    <kendo-sparkline [data]="Data" type="bullet" [valueAxis]="bulletValueAxis">
    </kendo-sparkline>

.ts 文件 - 值轴

        this.bulletValueAxis = {
        min: 0,
        max: 30,
        color: 'purple',
        background: 'grey',
        // title: { text: 'test' },
        type: 'numeric',
        plotBands: [{
            from: 0, to: this.config.min, color: 'yellow', opacity: 0.3
        }, {
            from: this.config.min, to: this.config.max, color: '#008b00', opacity: 0.3
        }, {
            from: this.config.max, to: this.config.max + 5, color: '#ff0000', opacity: 0.3
        }]
    };

标签： angularkendo-uikendo-ui-angular2

解决方案

color 属性是series或 seriesDefaults 配置的一部分（与 valueAxis 一相反），例如：

<kendo-sparkline [data]="bulletData" type="bullet" [seriesDefaults]="{color: 'purple'}" [valueAxis]="bulletValueAxis">

例子

推荐阅读