[英]How to apply color gradient in progress bar in high chart with stylemode in Angular
[英]Kendo Angular Bar chart customization on applying gradient color
我是 Kendo UI angular 的新手,我必须自定义一个条形图,其中每个条形图都有多种颜色渐变。 剑道可以达到吗? 我的条形图是在融合中开发的,但我发现用剑道实现同样的效果并不困难。
附上了我需要实现的图像以及我在剑道中的代码是什么。
我在剑道中的代码
<kendo-chart style="height: 317px;">
<kendo-chart-axis-defaults [majorGridLines]="{ visible : false}">
</kendo-chart-axis-defaults>
<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]="['jan','feb','mar','apr','may','jun','aug','set','oct','nov','dec']">
</kendo-chart-category-axis-item>
</kendo-chart-category-axis>
<kendo-chart-series>
<kendo-chart-value-axis>
<kendo-chart-value-axis-item [line]="{visible:false}" labels="false">
</kendo-chart-value-axis-item>
</kendo-chart-value-axis>
<kendo-chart-series-item
type="column"
[color]="pointColor"
[gap]="10"
[stack]="true"
[data]="['1000','0','200','2000','1500','1000','0','200','2000','1500','3500','25']"
>
<kendo-chart-series-item-labels [content]="labelContent" rotation="90" [position]="end" >
</kendo-chart-series-item-labels>
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
要获得渐变效果,可以使用series属性overlay 。
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<kendo-chart>
<kendo-chart-title text="Units sold"></kendo-chart-title>
<kendo-chart-category-axis>
<kendo-chart-category-axis-item [categories]="['Q1', 'Q2', 'Q3', 'Q4']">
</kendo-chart-category-axis-item>
</kendo-chart-category-axis>
<kendo-chart-series>
<kendo-chart-series-item type="bar" [gap]="2" [spacing]=".25" [data]="[100, 123, 234, 343]" [overlay]="{gradient: 'roundedBevel'}">
</kendo-chart-series-item>
<kendo-chart-series-item type="bar" [data]="[120, 67, 231, 196]" [overlay]="{gradient: 'glass'}" >
</kendo-chart-series-item>
<kendo-chart-series-item type="bar" [data]="[45, 124, 189, 143]" [overlay]="{gradient: 'none'}">
</kendo-chart-series-item>
<kendo-chart-series-item type="bar" [data]="[87, 154, 210, 215]" [overlay]="{gradient: 'sharpBevel'}">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
`
})
export class AppComponent {}
还遇到了这个演示 ,用于创建自定义线性渐变。 请参考下面的代码,我以创建线性梯度柱形图为例。
import { Component } from '@angular/core';
import { Surface, Path, Text, Group, Layout, LinearGradient, GradientOptions, ShapeOptions } from '@progress/kendo-drawing';
import { Arc as DrawingArc, GradientStop } from '@progress/kendo-drawing';
import { Arc, Rect, ArcOptions } from '@progress/kendo-drawing/geometry';
function createColumn(rect, color) {
const origin = rect.origin;
const bottomRight = rect.bottomRight();
const gradient = new LinearGradient(<GradientOptions>{
stops: [new GradientStop(0, "#98FB98", 1),
new GradientStop(0.5, color, 1)]
});
const path = Path.fromRect(rect, <ShapeOptions>{
fill: gradient,
stroke: {
color: color,
width: 1
}
});
const group = new Group();
group.append(path);
return group;
}
@Component({
selector: 'my-app',
template: `
<kendo-chart [seriesDefaults]="chartConfig.seriesDefaults" >
<kendo-chart-title text="Units sold"></kendo-chart-title>
<kendo-chart-category-axis>
<kendo-chart-category-axis-item [categories]="['Q1', 'Q2', 'Q3', 'Q4']">
</kendo-chart-category-axis-item>
</kendo-chart-category-axis>
<kendo-chart-series>
<kendo-chart-series-item type="bar" [gap]="2" [spacing]=".25" [data]="[100, 123, 234, 343]" color="#008852">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
`
})
export class AppComponent {
public chartConfig = {
seriesDefaults: {
type: 'column',
visual: function (e) {
return createColumn(e.rect, e.options.color);
}
}
};
}
查看您的图表,我认为可以通过100%堆叠的柱形图来实现,您可以获得彩色和灰色部分的数据。 然后使用可以显示并旋转的label属性。
<script>
$("#chart").kendoChart({
series: [ {
labels: {
visible: true,
position: "outsideEnd",
rotation: 270
},
data: [1, 2, 3]
}]
});
</script>
尝试使用径向渐变和100%堆叠的条形图获得类似的条形图外观
import { Component } from '@angular/core';
import { Surface, Path, Text, Group, Layout, LinearGradient, RadialGradient, GradientOptions, ShapeOptions } from '@progress/kendo-drawing';
import { Arc as DrawingArc, GradientStop } from '@progress/kendo-drawing';
import { Arc, Rect, ArcOptions } from '@progress/kendo-drawing/geometry';
function createColumn(rect, color) {
const origin = rect.origin;
const bottomRight = rect.bottomRight();
const radialgradient = new RadialGradient(<GradientOptions>{
center:[0.5, 0],
stops: [new GradientStop(0.5, color, 1),
new GradientStop(1, "#98FB98", 1)]
});
const path = Path.fromRect(rect, <ShapeOptions>{
fill: radialgradient,
stroke: {
color: color,
width: 1
}
});
const path1 = Path.fromRect(rect, <ShapeOptions>{
fill: {color: color},
stroke: {
color: color,
width: 1
}
});
const group = new Group();
if(color == "#eee"){
group.append(path1);
}
else{
group.append(path);
}
return group;
}
@Component({
selector: 'my-app',
template: `
<kendo-chart [seriesDefaults]="chartConfig.seriesDefaults" >
<kendo-chart-title text="Units sold"></kendo-chart-title>
<kendo-chart-category-axis>
<kendo-chart-category-axis-item [categories]="['Q1', 'Q2', 'Q3', 'Q4']">
</kendo-chart-category-axis-item>
</kendo-chart-category-axis>
<kendo-chart-series>
<kendo-chart-series-item type="column" [stack]="{ type: '100%' }" [gap]="2" [spacing]=".25" [data]="[100, 120, 250, 345]" color="#008852">
</kendo-chart-series-item>
<kendo-chart-series-item type="column" [data]="[400, 380, 250, 155]" color="#eee">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
`
})
export class AppComponent {
public chartConfig = {
seriesDefaults: {
visual: function (e) {
return createColumn(e.rect, e.options.color);
}
}
};
}
我发现它们公开了允许您控制每个条的呈现方式的钩子。 使用
seriesDefaults<\/code> -chart 上的
seriesDefaults<\/code>属性,您可以提供自己的
visual()<\/code>方法。
脚步:
在您的组件中,在 seriesDefaults 上提供自定义可视化方法:<\/li><\/ol>seriesDefaults: SeriesDefaults = { type: 'column', visual: (e: SeriesVisualArgs) => createColumn(e.rect, e.options.color, e.dataItem), };<\/code><\/pre>
- 自定义方法可能看起来像这样。 可选地,我在每个栏上方添加了一个文本项以显示 dataItem 值(这很粗糙,我正在假设它的 x\/y 位置):<\/li><\/ol>
export function createColumn(rect: geometry.Rect, color: string, dataItem: number): Group { const gradient = new LinearGradient(<GradientOptions>{ stops: [new GradientStop(0, color, 0.7), new GradientStop(0.4, color, 1)], }); gradient.start([0.5, 0]); gradient.end([0.5, 1]); \/\/ Turn the rect into a path and reference the gradient const path = Path.fromRect(rect, <ShapeOptions>{ fill: gradient, stroke: { color: '#777', width: 1, }, }); \/\/ Add the dataItem value above the bar const position = rect.topLeft(); position.y -= 13; position.x += (rect.width() \/ 2) - 10; const text = new Text(dataItem + '', position); const group = new Group(); group.append(path); group.append(text); return group; } ``` [![Results][1]][1] [1]: https:\/\/i.stack.imgur.com\/wVOmQ.png<\/code><\/pre>"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.