如何为Kendo柱状图设置圆角边框及自定义高亮颜色

问题说明 #

如何实现如图所示的Kendo柱状图圆角边框效果？同时希望修改柱状图的悬停高亮颜色，当前使用的代码如下：

<kendo-chart-series>
            <kendo-chart-series-item
                type="line"
                [field]="'engagement'"
                categoryField="label"
                [style]="'smooth'"
                [data]="chartData.data"
                [color]="chartData.color"
            >
                <kendo-chart-series-item-tooltip format="Avg. Engagements: {0}"></kendo-chart-series-item-tooltip>
            </kendo-chart-series-item>
            <kendo-chart-series-item
                type="column"
                [line]="{ style: 'smooth' }"
                [field]="'posts'"
                [data]="chartData.data"
                [color]="chartData.secondarycolor"
                [border]="borderOptions"
                [highlight]="seriesHighlight"
            >
                <kendo-chart-series-item-tooltip format="Total: {0}"></kendo-chart-series-item-tooltip>
            </kendo-chart-series-item>
        </kendo-chart-series>

解决方案 #

1. 实现柱状图圆角边框

Kendo柱状图的圆角效果可通过配置borderOptions对象的radius属性实现，在组件的TypeScript代码中定义该对象：

// 组件类中配置边框与圆角
public borderOptions = {
  width: 1, // 边框宽度，可按需调整
  color: '#ddd', // 边框颜色，可按需调整
  radius: 4 // 圆角半径，数值越大圆角越明显
};

2. 修改柱状图悬停高亮颜色

通过seriesHighlight对象指定悬停时的高亮颜色，同样在组件TypeScript代码中定义：

// 组件类中配置悬停高亮颜色
public seriesHighlight = {
  color: '#your-target-color' // 替换为你需要的高亮颜色
};

完整代码示例

组件TypeScript部分：

import { Component } from '@angular/core';

@Component({
  selector: 'app-chart',
  templateUrl: './chart.component.html'
})
export class ChartComponent {
  public chartData = {
    data: [/* 此处填入你的图表数据 */],
    color: '#line-default-color',
    secondarycolor: '#column-default-color'
  };

  public borderOptions = {
    width: 1,
    color: '#ddd',
    radius: 4
  };

  public seriesHighlight = {
    color: '#your-highlight-color'
  };
}

模板代码保持你提供的原有结构即可。

内容的提问来源于stack exchange，提问作者user6634092