我在这里遇到了一个情况,包括React的使用以及chart.js库中的附加插件:chartjs插件瀑布。
我必须为我的客户开发一个个性化的 Jmeter 板,到目前为止,我已经能够使用库chartjs及其react组件实现所需的每种类型的图表:React图-2。
但是,我现在正为最后一个必须实现的组件(它不能作为“React图组件”提供)而奋斗数小时:瀑布图。为此,我决定添加chartjs-plugin-waterfall,并将其实现为一个新的图表(这里是一个代码示例):
const WaterFallType = () => {
let chart = false
useEffect(() => {
if(chart instanceof Chart) {
chart.destroy();
}
let ctx = document.getElementById("myChart").getContext('2d')
chart = new Chart(ctx, {
type: "bar",
plugins: [waterFallPlugin],
data :{
datasets: [
{
label: 'Closing Costs',
data: [50],
backgroundColor: '#e8cdd7',
stack: 'stack 1',
},
{
label: 'Purchase Price',
data: [700],
backgroundColor: '#d29baf',
stack: 'stack 1',
},
{
data: [200],
waterfall: {
dummyStack: true,
},
stack: 'stack 2',
},
{
label: 'Opening Loan Balance',
data: [550],
backgroundColor: '#bb6987',
stack: 'stack 2',
},
{
label: 'Initial Cash Investment',
data: [200],
backgroundColor: '#a53860',
stack: 'stack 3',
},
],
},
options: {
plugins: {
waterFallPlugin: {
stepLines: {
enabled: true,
startColorStop: 0,
endColorStop: 0.6,
startColor: 'rgba(0, 0, 0, 0.55)',
endColor: 'rgba(0, 0, 0, 0)',
diagonalStepLines: true,
},
},
},
}
})
}, [chart])
return <div>
<canvas id="myChart" width="400px" height="400px"></canvas>
</div>
}
export default WaterFallType
不幸的是,这段代码没有呈现组件,而是抛出了几个错误:
第一个:“未捕获的错误:画布已在使用中。必须先销毁ID为“2”的图表,然后才能重新使用画布。”
第二个:“未捕获的类型错误:无法设置未定义的属性(设置“筛选器”)”
有人能帮我打这场仗吗?非常感谢你的帮助。
本雅明
1条答案
按热度按时间zzwlnbp81#
终于找到了一个解决方案,无需任何插件。Chart.js允许浮动条:https://www.chartjs.org/docs/3.2.1/samples/bar/floating.html
这样就容易多了!
祝您愉快!