如何向 Kendo 图表添加垂直和水平滚动条
How to add vertical and horizontal scrollbar to the Kendo chart
我正在使用 kendo 图表,我希望 y 轴上的类别和 x 轴上的日期是静态的,并且想要图表的滚动条而不是 div 并且还想要条形尺寸小,字体大小应小于示例中的尺寸。
要做到这一点,必须
- 将样式部分添加到您的组件定义中
- 从 div
中删除了内联样式
app.component.ts 更改如下:
@Component({
selector: 'my-app',
template: `
<div >
<kendo-chart style="width: 3832px" [valueAxis]="valueAxis" [ngStyle]="{ 'height.px': chartHeight }">
<kendo-chart-plot-area background="#F2F2F2"></kendo-chart-plot-area>
<kendo-chart-series>
<kendo-chart-series-item *ngFor="let series of model"
type="rangeBar" [spacing]="-1" [data]="series.data" [opacity]="0.8" fromField="Start" toField="End" categoryField="Category">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
</div>
`,
styles:[`
kendo-chart{ max-width: 525px; max-height: 300px;}
::ng-deep g>text{ font-size: 11px !important;}
`]
})
我正在使用 kendo 图表,我希望 y 轴上的类别和 x 轴上的日期是静态的,并且想要图表的滚动条而不是 div 并且还想要条形尺寸小,字体大小应小于示例中的尺寸。
要做到这一点,必须
- 将样式部分添加到您的组件定义中
- 从 div 中删除了内联样式
app.component.ts 更改如下:
@Component({
selector: 'my-app',
template: `
<div >
<kendo-chart style="width: 3832px" [valueAxis]="valueAxis" [ngStyle]="{ 'height.px': chartHeight }">
<kendo-chart-plot-area background="#F2F2F2"></kendo-chart-plot-area>
<kendo-chart-series>
<kendo-chart-series-item *ngFor="let series of model"
type="rangeBar" [spacing]="-1" [data]="series.data" [opacity]="0.8" fromField="Start" toField="End" categoryField="Category">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
</div>
`,
styles:[`
kendo-chart{ max-width: 525px; max-height: 300px;}
::ng-deep g>text{ font-size: 11px !important;}
`]
})