reactjs - Google React 图表放置和图例放置

Question

我在将谷歌反应图表放置在全宽容器的左侧时遇到了麻烦，而没有传说认为它被切断了。

如果我将其保留为默认值，它看起来像这样：

但是我希望它位于左侧，而图例位于它旁边。

当我更改图表区域的位置时：

chartArea: {
            left: 0,
            right: 400,
            top: 0,
            bottom: 0,
            width: '100%',
            height: '80%',
        },

然后看起来像这样：

无论出于何种原因，它认为没有足够的空间，它会删除非常烦人的图例文本。

这是我正在使用的代码：

const pieOptions = {
        title: '',
        pieHole: 0.6,
        slices: [
            {
                color: '#00A3E0',
            },
            {
                color: '#F2A900',
            },
            {
                color: '#43B02A',
            },
            {
                color: '#DF4661',
            },
            {
                color: '#003865',
            },
            {
                color: '#A15A95',
            },
            {
                color: '#FF6A13',
            },
        ],
        legend: {
            position: 'right',
            alignment: 'end',
            textStyle: {
                color: '#666',
                fontSize: 12,
            },
        },
        tooltip: {
            showColorCode: true,
        },
        chartArea: {
            left: 0,
            right: 400,
            top: 0,
            bottom: 0,
            width: '100%',
            height: '80%',
        },
        fontName: 'inherit',
        fontSize: 12,
    }

任何人都可以建议吗？

另外，如果这无法修复，您能否推荐一个支持该图表和自定义颜色的图表？

先感谢您！

标签： reactjschartsgoogle-visualizationreact-google-charts