Plotly仅为Title提供有限的函数。
我正在使用Plotly和react，我想将字体权重设置为title。如果可能的话，我尝试了Plotly文档，但没有找到任何适合字体样式的特定内容
<PieChart data={[{
values: [60, 20, 10, 5, 5], labels: ['Healthy', 'Mild', 'Moderate', 'Severe', 'Critical'], hole: .6, type: 'pie', marker: {
colors: ['#68B34D', '#FFDF83', '#FE9551', '#FE0801', '#B90000']
}
}]}
layout={{
title: { text: '<b>Health Status</b>', x: '0.1', size: '14', font: { family: 'Montserrat, sans-serif' } }, annotations: [
{
font: {
size: 13,
color: '#323D4B',
family: 'Montserrat, sans-serif'
},
text: `<b>${pieData.values.reduce((a, b) => a + b, 0)}<br>Machines</b>`,
showarrow: false,
}
], showlegend: true,
legend: { orientation: 'h', x: 0.5, y: -.7, xanchor: 'center', yanchor: 'bottom', font: { family: 'Montserrat, sans- serif' } },
height: 320,
width: 248,
margin: { l: 0, r: 0, t: 50, b: 20 },
}} />
import createPlotlyComponent from "react-plotly.js/factory";
export const Plot = createPlotlyComponent(Plotly);
export function PieChart(props: PieChartProps) {
const { data, layout } = props;
return <Plot data={data} layout={layout} />;
}
font-family、size、color。如果要应用font-weight，则只有<b></b>。
所以我使用这种解决方案。使Plot成为样式化组件，并将样式应用于与组件标题相对应的类。
import Plot from 'react-plotly.js';
...
const GraphContainer = styled(Plot)`
/** gtitle is title class */
.gtitle {
font-weight: 800 !important;
}
`;
export function PieChart(props: PieChartProps) {
const { data, layout } = props;
return <GraphContainer data={data} layout={layout} />;
}