<script src="https://pie-meister.github.io/PieMeister-with-Progress.min.js"></script>
<pie-chart className="nested" offset="top">
<style>
path {
stroke-linecap: round;
stroke-width: 90;
}
[color1] {
stroke: #BFBDB2;
stroke-width: 50;
}
[color2] {
stroke: #26BDD8;
stroke-width: 60;
}
[color3] {
stroke: #824BF1;
}
[part="path"]:not([y]) {
stroke: #BFBDB2;
stroke-width: 60;
opacity: 0.4;
}
</style>
我正在使用这个库pie-master,它具有如上所示的样式属性。我想在react中实现类似的。
& lt;组件样式={{颜色:"red"}/祝辞
在React中,你必须将style属性作为对象传递给组件。假设你的组件名是PieChart,你可以像这样传递style属性
<PieChart style={{ border: '1px solid red', fontSize: '1rem' }}>
</PieChart>
<div style={{ border: '1px solid red', fontSize: '1rem' }}></div>
查看更多文档
我也尝试了这些,它们适用于其他元素,但不适用于这张图。然而,我找到了一个解决办法。
<script src="https://pie-meister.github.io/PieMeister-with-Progress.min.js"></script>
import React from 'react'
const style = ` <pie-chart class="nested" offset="top">
<style>
path {
stroke-linecap: round;
stroke-width: 90;
}
[color1] {
stroke: #BFBDB2;
stroke-width: 50;
}
[color2] {
stroke: #26BDD8;
stroke-width: 60;
}
[color3] {
stroke: #824BF1;
}
[part="path"]:not([y]) {
stroke: #BFBDB2;
stroke-width: 60;
opacity: 0.4;
}
</style>
<slice color1 size="100%" radius="200"><!--No label--></slice>
<slice color1 size="88%" radius="200" y="65"><tspan> $size</tspan></slice>
<slice color2 size="100%" radius="100"> </slice>
<slice color2 size="40%" radius="100" y="165"><tspan> $size</tspan> </slice>
<slice color3 size="100%" radius="0"> </slice>
<slice color3 size="10%" radius="0" y="265"><tspan> $size</tspan></slice>
</pie-chart>`
export default function Styles() {
return (
<div dangerouslySetInnerHTML={{__html:style}}/>
)
}