Попробуйте это (используя random.choice from items)
import random
a={ "str" : "sda" , "number" : 123, 55 : "num"}
random.choice(list(a.items()))
# ('str', 'sda')
random.choice(list(a.items()))[1] # getting a value
# 'num'
Для эффекта градиента вы можете использовать свойство 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% -ной столбчатой диаграммы , в которой вы можете получить данные как для цветных, так и для серых участков. Затем используйте свойство метки, которое можно отобразить и с вращением .
<script>
$("#chart").kendoChart({
series: [ {
labels: {
visible: true,
position: "outsideEnd",
rotation: 270
},
data: [1, 2, 3]
}]
});
</script>
Попытка получить похожий вид для гистограммы с использованием радиального градиента и стопроцентных столбцов
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);
}
}
};
}