Ag-Grid createRangeChart 不是函数

Posted 2023-03-28

【中文标题】Ag-Grid createRangeChart 不是函数

【英文标题】：Ag-Grid createRangeChart is not a function

【发布时间】：2020-08-08 08:13:05

【问题描述】：

我正在尝试使用 ag-grid 创建范围图表，但在页面加载时控制台中出现错误“TypeError: params.api.createRangeChart is not a function”。我试图在官方图表指南（https://www.ag-grid.com/javascript-grid-charts-integrated-chart-range-api/）中这样做，但它不起作用。我究竟做错了什么？ (ag-grid v21.2.1)

UPD 所以，我发现这是一个与包有关的问题，因为对于模块，这种方法存在。不过，有什么想法可以解决包裹问题吗？

<template>
    <div class="table_outer_container">
        <div class="table_navigation_button_container" v-if="navigationTabs">
            <navigation-tab v-for="(navTab, index) in navigationTabs"
                            :isLoading="isLoading"
                            :navTab="navTab"
                            :key="navTab.name + index + navTab.active"
                            @tab-switch="makeTabActive"
            ></navigation-tab>
        </div>
        <ag-grid-vue style="width: 60%"
                     class="ag-theme-balham"
                     :gridOptions="gridOptions"
                     :rowHeight="rowHeight"
                     :columnDefs="columnDefs"
                     :rowData="rowData"
                     :context="context"
                     :enableRangeSelection="true"
                     :enableCharts="true"
                     :navigationTabs="navigationTabs"
                     :defaultColDef="defaultColDef"
                     :domLayout="autoHeight"
                     @first-data-rendered="onFirstDataRendered"
                     :fileName="fileName">
        </ag-grid-vue>
        <div id="table_chart" style="flex: 1 1 auto; overflow: hidden; height: 30%; width: 25%;"></div>
    </div>
</template>

<script>

    import AgGridVue from "ag-grid-vue";
    import "ag-grid-enterprise";
    import "ag-grid-enterprise/chartsModule";

    import HyperlinkRenderer from "./cell_renderers/hyperlink_cell_renderer.vue";
    import MultilinkRenderer from "./cell_renderers/multilink_cell_renderer.vue";
    import NavigationTab from "./navigation_tab.vue";


    export default 
        data() 
            return 
                gridOptions: null,
                context: null,
                gridApi: null,
                columnApi: null,
                isLoading: false,
                rowHeight: 30,
                autoHeight: 'autoHeight'
            
        ,
        name: 'App',
        props: ['endpoint', 'columnDefs', 'rowData', 'defaultColDef', 'navigationTabs', 'versionId', 'fileName', 'chartParams'],
        components: 
            AgGridVue,
            HyperlinkRenderer,
            MultilinkRenderer,
            NavigationTab
        ,
        beforeMount() 
            this.context = componentParent: this;
            this.gridOptions = 
                getRowClass: this.getRowClass
            ;
            this.domLayout = 'autoHeight';
        ,
        mounted() 
          this.gridApi = this.gridOptions.api;
          this.gridApi.sizeColumnsToFit()

        ,
        methods: 
            onFirstDataRendered(params)
                var eContainer = document.querySelector('table_chart');
                var chart_params = 
                    cellRange: 
                        columns: ['delivered', 'in_transit', 'held'],
                    ,
                    chartType: 'stackedBar',
                    chartContainer: eContainer,
                    processChartOptions: function(params) 
                        params.options.seriesDefaults.tooltip.renderer = function(params) 
                            var titleStyle = params.color
                                ? ' style="color: white; background-color:' + params.color + '"'
                                : '';
                            var title = params.title
                                ? '<div class="ag-chart-tooltip-title"' +
                                titleStyle +
                                '>' +
                                params.title +
                                '</div>'
                                : '';
                            var value = params.datum[params.yKey]
                                .toString()
                                .replace(/(\d)(?=(\d3)+(?!\d))/g, '$1,');
                            return (
                                title +
                                '<div class="ag-chart-tooltip-content" style="text-align: center">' +
                                value +
                                '</div>'
                            );
                        ;
                        return params.options;
                    ,
                ;
                params.api.createRangeChart(chart_params);
            ,
            navigateTo(url) 
                window.open(url, '_blank');
            ,
            getRowClass(params) 
                if (params.data.customRowClass) 
                    return params.data.customRowClass
                
            ,
            makeTabActive(clickedTab) 
                if (this.isLoading) 
                    return false
                
                this.toggleLoading();
                this.navigationTabs.forEach(function (tab) 
                    tab.active = (clickedTab.name === tab.name)
                );
                this.endpoint = clickedTab.endpoint;
                this.updateFromEndpoint()
            ,
            updateFromEndpoint() 
                const endpoint = this.endpoint;
                const self = this;
                $.ajax(
                    url: endpoint,
                    type: 'POST',
                    dataType: 'json',
                    data: 
                        version_id: self.versionId
                    ,
                    success: function (data) 
                        const tableData = data['table_data'];
                        const rowData = tableData['rowData'];
                        const columnDefs = tableData['columnDefs'];
                        const defaultColDef = tableData['defaultColDef'];
                        self.rowData = rowData;
                        self.columnDefs = columnDefs;
                        self.defaultColDef = defaultColDef;
                        self.toggleLoading()
                    ,
                    error: function (xhr, err) 
                        alert(err);
                    
                );
            ,
            toggleLoading() 
                if (this.isLoading) 
                    this.gridApi.hideOverlay();
                 else 
                    this.gridApi.showLoadingOverlay()
                
                this.isLoading = !this.isLoading
            
        
    
</script>

【问题讨论】：

这里params.api的范围是什么？

params.api 可用并代表 GridApi，只是由于某些原因不知道什么是 createRangeChart

【参考方案1】：

在我看来，您使用的 ag-grid 版本没有createRangeChart。 以前叫chartRange

试试这个 -

params.api.chartRange(chart_params);

在此处查看存档文档 - https://www.ag-grid.com/archive/21.2.1/javascript-grid-charts-chart-range-api/#chart-range-api-1