reactjs - React Google 饼图样式化标题

Question

我正在尝试使用谷歌反应饼图但是我很难定位标题。

这是我的代码：

const pieOptions = {
    title: 'my awesome chart',
    pieHole: 0.6,
    slices: [
        {
            color: '#00a3e0',
        },
        {
            color: '#f2a900',
        },
        {
            color: 'F16A21',
        },
        {
            color: '#e9a227',
        },
    ],
    legend: {
        position: 'right',
        alignment: 'center',
        textStyle: {
            color: '233238',
            fontSize: 14,
        },
    },
    tooltip: {
        showColorCode: true,
    },
    // chartArea: {
    //     left: 0,
    //     top: 0,
    //     width: '100%',
    //     height: '70%',
    // },
    fontName: 'Roboto',
    fontSize: 20,
}

<Chart
                chartType="PieChart"
                data={[
                    ['Item', 'Numbers'],
                    ['Item 1', 5000],
                    ['Item 2', 20000],
                    ['Item 3', 6000],
                ]}
                options={pieOptions}
                graph_id="PieChart"
                width={'100%'}
                height={'220px'}
                legend_toggle
            />

这是我得到的：

我想要的结果是将标题放在图例之上，但我不知道该怎么做。

这是我正在使用的 npm 包的链接：

https://github.com/RakanNimer/react-google-charts#donut-chart https://github.com/rakannimer/react-google-charts/blob/master/sandboxes/pie-chart/index.js

标签： reactjsreact-google-charts

Answer 1

似乎没有办法定位标题。您必须titlePosition: 'none'单独设置和创建标题，然后按您的需要设置样式。

阅读更多文档。