[英]Ag-Grid createRangeChart is not a function
我正在嘗試使用 ag-grid 創建范圍圖表,但在頁面加載時,控制台中出現錯誤“TypeError: params.api.createRangeChart is not a function”。 我試着像官方圖表指南 ( https://www.ag-grid.com/javascript-grid-charts-integrated-chart-range-api/ ) 那樣做,但它不起作用。 我究竟做錯了什么? (農業網格 v21.2.1)
UPD 所以,我發現,這是一個與 package 相關的問題,因為模塊存在這種方法。 不過,有什么想法可以為包裹修復它嗎?
<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)(?=(\d{3})+(?!\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>
在我看來,您使用的 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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.