Настройка угловой диаграммы Kendo при применении цвета градиента

Question

новый для Kendo UI угловой, Я должен настроить гистограмму, где каждый столбец будет иметь несколько цветовых градиентов. можно ли достичь в кендо? У меня есть моя гистограмма, разработанная в фьюжн, но мне было немного трудно добиться того же с кендо.

приложил изображение того, что мне нужно для достижения, а также того, что мой код в кендо.

мой код в кендо

<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>

Answer 1

Глядя на ваш график, я чувствую, что этого можно достичь с помощью 100% -ной столбчатой ​​диаграммы , вы можете получить данные как для цветных, так и для серых участков. Затем используйте свойство метки, которое можно отобразить и с вращением .

<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);
          }
      }
  };

}

Answer 2

Для эффекта градиента вы можете использовать свойство серии 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);
          }
      }
  };

}