如果数据相对较小,Kendo 柱形图的 Bar 不显示 -- Kendo Angular Chart

Posted

技术标签:

【中文标题】如果数据相对较小,Kendo 柱形图的 Bar 不显示 -- Kendo Angular Chart【英文标题】:Bar for Kendo Column Chart does not show if the data is relatively small -- Kendo Angular Chart 【发布时间】:2019-05-05 19:26:09 【问题描述】:

我遇到了这样一种情况,如果数据集的值远小于其他值,则垂直条不会显示,但条形图不会出现这种情况。对于条形图,水平条出现在图表上。尽管两个图表中的所有记录都显示了图例。

不确定这是预期的功能还是错误。

我创建的示例代码用于重现我的 QA 团队提出的错误。任何帮助将不胜感激。

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="column" [data]="[120000, 67000, 231, 196000000]">
        </kendo-chart-series-item>

      </kendo-chart-series>
    </kendo-chart>

<h4> H-Bar Chart</h4>


    <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" [data]="[120000, 67000, 231, 196000000]">
        </kendo-chart-series-item>

      </kendo-chart-series>
    </kendo-chart>
  `
)
export class AppComponent 

/Stackblitz 也一样/

https://stackblitz.com/edit/angular-w5c6ir?file=src%2Fapp%2Fapp.component.html

【问题讨论】:

【参考方案1】:

为可能遇到这种情况的人回答我自己的问题。 我已经向 Kendo 团队提出了这个问题,并且知道这是一个错误。截至目前,解决方法是禁用窗格的剪辑。

[panes]="[ 剪辑:假 ]"

更新:已在版本 @progress/kendo-angular-charts 3.5.2 中修复。

https://stackblitz.com/edit/angular-y6nkw1?file=app/app.component.ts

现在无需将剪辑设置为 false

stackblitz:https://stackblitz.com/edit/angular-dvynmu?file=src/app/app.component.html

【讨论】:

以上是关于如果数据相对较小,Kendo 柱形图的 Bar 不显示 -- Kendo Angular Chart的主要内容,如果未能解决你的问题,请参考以下文章

如何利用Python中的Pandas库绘制柱形图

在Echarts 柱形图的单击事件中写入自定义的参数

PHPWordPHPWord生成图表-柱形图 | 设置数值类别展示展示多组数据

PHPWordPHPWord生成图表-柱形图 | 设置数值类别展示展示多组数据

PHPWordPHPWord生成图表-柱形图 | 设置数值类别展示展示多组数据

R语言 | 绘制堆叠柱形图示例