gpt4 book ai didi

Extjs 将图表添加到网格列

转载 作者:行者123 更新时间:2023-12-04 04:45:08 24 4
gpt4 key购买 nike

我在 extjs 中有网格 View ,但我需要在每一行中显示一个条形图,以显示某些值的百分比。如何在 extjs 中实现这一点?也许这张图片会帮助我想要构建的东西。

enter image description here

最佳答案

实现此目的的一种方法是延迟呈现图表。基本上你这样做:

  • 使用自定义渲染器创建网格列。
  • 在渲染器中,您输出一个具有已知 ID 的 div。这个 div 最终将包含您的图表。
  • 您将调用(使用 Ext.defer )推迟到自定义函数,传入此 ID(以及图表所需的任何信息)。此函数将呈现您的图表。
  • 在该函数中,您创建一个图表并使其renderTo带有传入 ID 的元素。

  • 此代码近似于您应该执行的操作。您可能希望更明智地重构它。
    Ext.create('Ext.grid.Panel', {
    height: 300,
    store: main_data,
    columns: [
    { text: 'name', dataIndex: 'name', sortable: true },
    { text: 'chart', renderer: function (value, meta, record) {
    var id = Ext.id();
    Ext.defer(function (id) {
    var chart = Ext.create('Ext.chart.Chart', {
    store: chart_data,
    width: 200,
    height: 100,
    // other chart configuration...
    renderTo: id
    });
    }, 50, undefined, [id]);
    return "<div id='" + id + "'></div>";
    } }

    ]
    });

    关于Extjs 将图表添加到网格列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18326263/

    24 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com