Я получил код от моего друга. Когда я запустил этот код, я получил ошибки. Это проект React, использующий график реакции js -2. Я пытался найти решения в Интернете, но некоторые похожие решения зависели от их собственных случаев. Те были похожи, но разные. Я загрузил длинный код, потому что я думал, что вы можете понять это, если не весь код. Я действительно ценю решение.
createchart () {
let labels = ['Projected Revenue', 'Booked Crop Sales', 'Unsold Crop Value', 'Current Crop Value', 'Expense', 'Income']
dataSets[0] = (financialData[selectedCropIndex].projectRevenue / 1000000).toFixed(2);
dataSets[1] = (financialData[selectedCropIndex].soldCropRevenue / 1000000).toFixed(2);
dataSets[2] = (financialData[selectedCropIndex].unsoldCropvalue / 1000000).toFixed(2);
dataSets[3] = ((financialData[selectedCropIndex].unsoldCropvalue + financialData[selectedCropIndex].soldCropRevenue) / 1000000).toFixed(2);
dataSets[4] = (financialData[selectedCropIndex].costProduction / 1000000).toFixed(2);
dataSets[5] = (dataSets[0] - dataSets[4]).toFixed(2);
let max = dataSets[3] > dataSets[4] ? dataSets[3] : dataSets[4];
const chartData = {
labels : [''],
datasets : [
{
label: [labels[0]],
data : [dataSets[0]],
backgroundColor : [colors[0]],
borderColor : [colors[0]],
barPercentage: 1,
categoryPercentage : 1,
},
{
label: [labels[1]],
data : [dataSets[1]],
backgroundColor : [colors[1]],
borderColor : [colors[1]],
barPercentage: 1,
categoryPercentage : 1,
},
{
label: [labels[2]],
data : [dataSets[2]],
backgroundColor : [colors[2]],
borderColor : [colors[2]],
barPercentage: 1,
categoryPercentage : 1,
},
{
label: [labels[3]],
data : [dataSets[3]],
backgroundColor : [colors[3]],
borderColor : [colors[3]],
barPercentage: 1,
categoryPercentage : 1,
},
{
label: [labels[4]],
data : [dataSets[4]],
backgroundColor : [colors[4]],
borderColor : [colors[4]],
barPercentage: 1,
categoryPercentage : 1,
},
{
label: [labels[5]],
data : [dataSets[5]],
backgroundColor : [colors[5]],
borderColor : [colors[5]],
barPercentage: 1,
categoryPercentage : 1,
},
]
}
const options = {
responsive: false,
legend: {
display: true,
position: 'left',
labels : {
boxWidth : 6,
usePointStyle : true
}
},
tooltips: {
enabled: true
},
scales: {
xAxes: [{
stacked: false, // this should be set to make the bars stacked
gridLines : {
display : true,
drawBorder: false,
color : '#A9AEB5',
borderDash: [2, 3],
zeroLineWidth: 1,
zeroLineBorderDash : [2, 3],
lineWidth : 1
},
afterfit : function (scaleInstance) {
scaleInstance.width = 200;
},
ticks: {
beginAtZero: true,
fontFamily: "'Open Sans Bold', sans-serif",
// Include a dollar sign in the ticks
callback: function(value, index, values) {
if (value < 0) {
return '($' + (-value).toFixed(1) + 'M)';
}
return '$' + value.toFixed(1) + 'M';
},
fontSize : 10,
stepSize : 0.1,
}
}],
yAxes: [
{
gridLines : {
display : false,
borderDash: [2, 3],
drawBorder: true,
},
ticks : {
fontSize : 12
},
afterfit : function (scaleInstance) {
scaleInstance.height = 200;
},
},
]
},
tooltips : {
enabled : false,
callbacks: {
label: function(tooltipItem) {
if(tooltipItem.xLabel < 0) {
return '($' + Number(-tooltipItem.xLabel) + 'M)';
}
return '$' + Number(tooltipItem.xLabel) + "M";
}
}
},
hover: {
animationDuration: 0
},
plugins : {
datalabels : {
borderRadius : '3',
font: {
size: '11',
weight: '500'
},
backgroundColor : 'white',
opacity: 0.6,
color : 'black',
anchor: 'end',
align : 'start',
padding : {
top : '2',
left : '3',
right : '3',
bottom : '0'
},
offset : function (context) {
let index = context.dataIndex;
let value = context.dataset.data[index];
if (value <= 0) {
return '15';
} else if ((Math.floor(max * 10) / 10 + 0.1 - value) < 0.07) {
return '5'
} else {
return '-45'
}
},
formatter : function (value) {
if ( value <= 0) {
return '($' + (-value) + 'M)';
}
return '$' + value + 'M';
},
display : 'auto',
clip : false
}
}
}
return (
<HorizontalBar
data = {chartData}
options={options}
height={200}
width = {960}
/>
)
}
В функции рендеринга:
<div className="chartGroup">
<div className="chartbg barchart marketingSummary">
<div className="revAnalysis">
<p className="mr-20">Revenue Projection & Analysis</p>
</div>
{this.createchart()}
</div>
</div>
Вот ошибки.
Uncaught RangeError: Maximum call stack size exceeded
at computeLabelSizes (Chart.js:10961)
at ChartElement._getLabelSizes (Chart.js:11590)
at ChartElement.calculateTickRotation (Chart.js:11393)
at ChartElement.update (Chart.js:11262)
at fitBoxes (Chart.js:6906)
at Object.update (Chart.js:7118)
at Chart.updateLayout (Chart.js:9367)
at Chart.update (Chart.js:9324)
at Chart.construct (Chart.js:9058)
at new Chart (Chart.js:8997)
at ChartComponent.renderChart (index.js:276)
at ChartComponent.componentDidMount (index.js:94)
at commitLifeCycles (react-dom.development.js:22043)
at commitLayoutEffects (react-dom.development.js:25286)
at HTMLUnknownElement.callCallback (react-dom.development.js:337)
at Object.invokeGuardedCallbackDev (react-dom.development.js:386)
at invokeGuardedCallback (react-dom.development.js:439)
at commitRootImpl (react-dom.development.js:25024)
at unstable_runWithPriority (scheduler.development.js:821)
at runWithPriority$2 (react-dom.development.js:12209)
at commitRoot (react-dom.development.js:24873)
at finishSyncRender (react-dom.development.js:24268)
at performSyncWorkOnRoot (react-dom.development.js:24248)
at react-dom.development.js:12263
at unstable_runWithPriority (scheduler.development.js:821)
at runWithPriority$2 (react-dom.development.js:12209)
at flushSyncCallbackQueueImpl (react-dom.development.js:12258)
at flushSyncCallbackQueue (react-dom.development.js:12246)
at discreteUpdates$1 (react-dom.development.js:24365)
at discreteUpdates (react-dom.development.js:1442)
at dispatchDiscreteEvent (react-dom.development.js:5917)
index.js:292 Uncaught TypeError: Cannot read property 'config' of undefined
at ChartComponent.destroyChart (index.js:292)
at ChartComponent.componentWillUnmount (index.js:147)
at callComponentWillUnmountWithTimer (react-dom.development.js:21843)
at HTMLUnknownElement.callCallback (react-dom.development.js:337)
at Object.invokeGuardedCallbackDev (react-dom.development.js:386)
at invokeGuardedCallback (react-dom.development.js:439)
at safelyCallComponentWillUnmount (react-dom.development.js:21850)
at commitUnmount (react-dom.development.js:22331)
at commitNestedUnmounts (react-dom.development.js:22425)
at unmountHostComponents (react-dom.development.js:22748)
at commitDeletion (react-dom.development.js:22834)
at commitMutationEffects (react-dom.development.js:25265)
at HTMLUnknownElement.callCallback (react-dom.development.js:337)
at Object.invokeGuardedCallbackDev (react-dom.development.js:386)
at invokeGuardedCallback (react-dom.development.js:439)
at commitRootImpl (react-dom.development.js:24992)
at unstable_runWithPriority (scheduler.development.js:821)
at runWithPriority$2 (react-dom.development.js:12209)
at commitRoot (react-dom.development.js:24873)
at finishSyncRender (react-dom.development.js:24268)
at performSyncWorkOnRoot (react-dom.development.js:24248)
at react-dom.development.js:12263
at unstable_runWithPriority (scheduler.development.js:821)
at runWithPriority$2 (react-dom.development.js:12209)
at flushSyncCallbackQueueImpl (react-dom.development.js:12258)
at flushSyncCallbackQueue (react-dom.development.js:12246)
at discreteUpdates$1 (react-dom.development.js:24365)
at discreteUpdates (react-dom.development.js:1442)
at dispatchDiscreteEvent (react-dom.development.js:5917)
index.js:1375 The above error occurred in the <ChartComponent> component:
in ChartComponent (created by HorizontalBar)
in HorizontalBar (at cropMarketing.js:208)
in div (at cropMarketing.js:465)
in div (at cropMarketing.js:464)
in div (at cropMarketing.js:418)
in CropMarketing (at pageContent.js:44)
in PageContent (at main.js:412)
in div (at main.js:395)
in div (at main.js:383)
in MainComponent (at App.js:6)
in div (at App.js:5)
in App (at src/index.js:23)
Consider adding an error boundary to your tree to customize error handling behavior.
console.<computed> @ index.js:1375
react-dom.development.js:12276 Uncaught RangeError: Maximum call stack size exceeded
at computeLabelSizes (Chart.js:10961)
at ChartElement._getLabelSizes (Chart.js:11590)
at ChartElement.calculateTickRotation (Chart.js:11393)
at ChartElement.update (Chart.js:11262)
at fitBoxes (Chart.js:6906)
at Object.update (Chart.js:7118)
at Chart.updateLayout (Chart.js:9367)
at Chart.update (Chart.js:9324)
at Chart.construct (Chart.js:9058)
at new Chart (Chart.js:8997)
at ChartComponent.renderChart (index.js:276)
at ChartComponent.componentDidMount (index.js:94)
at commitLifeCycles (react-dom.development.js:22043)
at commitLayoutEffects (react-dom.development.js:25286)
at HTMLUnknownElement.callCallback (react-dom.development.js:337)
at Object.invokeGuardedCallbackDev (react-dom.development.js:386)
at invokeGuardedCallback (react-dom.development.js:439)
at commitRootImpl (react-dom.development.js:25024)
at unstable_runWithPriority (scheduler.development.js:821)
at runWithPriority$2 (react-dom.development.js:12209)
at commitRoot (react-dom.development.js:24873)
at finishSyncRender (react-dom.development.js:24268)
at performSyncWorkOnRoot (react-dom.development.js:24248)
at react-dom.development.js:12263
at unstable_runWithPriority (scheduler.development.js:821)
at runWithPriority$2 (react-dom.development.js:12209)
at flushSyncCallbackQueueImpl (react-dom.development.js:12258)
at flushSyncCallbackQueue (react-dom.development.js:12246)
at discreteUpdates$1 (react-dom.development.js:24365)
at discreteUpdates (react-dom.development.js:1442)
at dispatchDiscreteEvent (react-dom.development.js:5917)
index.js:1375 The above error occurred in the <ChartComponent> component:
in ChartComponent (created by HorizontalBar)
in HorizontalBar (at cropMarketing.js:208)
in div (at cropMarketing.js:465)
in div (at cropMarketing.js:464)
in div (at cropMarketing.js:418)
in CropMarketing (at pageContent.js:44)
in PageContent (at main.js:412)
in div (at main.js:395)
in div (at main.js:383)
in MainComponent (at App.js:6)
in div (at App.js:5)
in App (at src/index.js:23)
Consider adding an error boundary to your tree to customize error handling behavior.
console.<computed> @ index.js:1375
react-dom.development.js:12276 Uncaught TypeError: Cannot read property 'config' of undefined
at ChartComponent.destroyChart (index.js:292)
at ChartComponent.componentWillUnmount (index.js:147)
at callComponentWillUnmountWithTimer (react-dom.development.js:21843)
at HTMLUnknownElement.callCallback (react-dom.development.js:337)
at Object.invokeGuardedCallbackDev (react-dom.development.js:386)
at invokeGuardedCallback (react-dom.development.js:439)
at safelyCallComponentWillUnmount (react-dom.development.js:21850)
at commitUnmount (react-dom.development.js:22331)
at commitNestedUnmounts (react-dom.development.js:22425)
at unmountHostComponents (react-dom.development.js:22748)
at commitDeletion (react-dom.development.js:22834)
at commitMutationEffects (react-dom.development.js:25265)
at HTMLUnknownElement.callCallback (react-dom.development.js:337)
at Object.invokeGuardedCallbackDev (react-dom.development.js:386)
at invokeGuardedCallback (react-dom.development.js:439)
at commitRootImpl (react-dom.development.js:24992)
at unstable_runWithPriority (scheduler.development.js:821)
at runWithPriority$2 (react-dom.development.js:12209)
at commitRoot (react-dom.development.js:24873)
at finishSyncRender (react-dom.development.js:24268)
at performSyncWorkOnRoot (react-dom.development.js:24248)
at react-dom.development.js:12263
at unstable_runWithPriority (scheduler.development.js:821)
at runWithPriority$2 (react-dom.development.js:12209)
at flushSyncCallbackQueueImpl (react-dom.development.js:12258)
at flushSyncCallbackQueue (react-dom.development.js:12246)
at discreteUpdates$1 (react-dom.development.js:24365)
at discreteUpdates (react-dom.development.js:1442)
at dispatchDiscreteEvent (react-dom.development.js:5917)