如何在Plotly.js,title中设置字体粗细

Question

我正在使用 Plotly 并作出反应，我想将 font-weight 设置为标题是否可能，我尝试了 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}  />;
}

Answer 1

Plotly 只为 Title 提供了有限的功能。 font-family、size、color。如果要申请font-weight，只有<b></b>.

所以我使用了这种解决方案。将 Plot 设为 styled-component 并将样式应用于组件标题对应的 class。

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}  />;
}

如何在Plotly.js,title中设置字体粗细

How to set font weight in Plotly.js, title

reactjs

plotly

plotly.js