反应谷歌图表不显示

埃切

我的 React 应用程序有一个大问题。我有几个饼图。但是我有一个显示问题。在某些浏览器中,它们可以工作,但在其他浏览器中,它们不起作用。例如,当我在两部完全相同的手机和浏览器中试用它们时,它们可以在其中一台上工作,而在另一台上不工作。

我认为这个问题与浏览器、帐户、设备无关,但我不知道有什么问题?

谷歌图表和重新图表在饼图中不起作用,但我的谷歌条形图工作正常。

当我尝试用虚拟数据显示饼图时,它可以工作。我认为我的数据有问题。

接口:

[{"title":"TOPLAM DÖNEN VARLIKLAR","value1":0.8099237254874144,"value2":0.6716967762970417},{"title":"TOPLAM DURAN VARLIKLAR","value1":0.19007627451258552,"value2":0.3283032237029582},{"title":"Toplam Kısa Vadeli Yükümlülükler","value1":0.6453778969419264,"value2":0.42796665648321913},{"title":"Toplam Uzun Vadeli Yükümlülükler","value1":0.12545336756938238,"value2":0.15300843856942245},{"title":"TOPLAM ÖZKAYNAKLAR","value1":0.22916873548869124,"value2":0.41902490494735845}]

反应

export function DonutValue({donut, comp, start, end}) {

    const colorsheme = [
        '#2b5818', '#50d741',
        '#7d99e7', '#355dd4', '#083edd'];

    const valr = [
        ['a', 'b'],
        [capitalizeEachFirstLetter(donut[start].title) + " (%)", parseInt(donut[start].value1.toLocaleString() * 100, 10)],
        [capitalizeEachFirstLetter(donut[start + 1].title) + " (%)", parseInt(donut[start + 1].value1.toLocaleString() * 100, 10)]
    ];

    if (end == 5) {
        valr.push(
            [capitalizeEachFirstLetter(donut[start + 2].title) + " (%)", parseInt(donut[start + 2].value1.toLocaleString() * 100, 10)]
        );
    }

    const vall = [
        ['a', 'b'],
        [capitalizeEachFirstLetter(donut[start].title) + " (%)", parseInt(donut[start].value2.toLocaleString() * 100, 10)],
        [capitalizeEachFirstLetter(donut[start + 1].title) + " (%)", parseInt(donut[start + 1].value2.toLocaleString() * 100, 10)]
    ];

    if (end == 5) {
        vall.push(
            [capitalizeEachFirstLetter(donut[start + 2].title) + " (%)", parseInt(donut[start + 2].value2.toLocaleString() * 100, 10)]
        );
    }

    return <Row>
        <Col sm="12" className="text-center">
            <div style={{width: '100%'}}>
                <ResponsiveContainer width={'99%'} height={300}>
                    <Chart
                        chartType="PieChart"
                        data={valr}
                        options={{
                            backgroundColor: 'transparent',
                            title: '',
                            pieHole: 0.6,
                            slices: [
                                {
                                    color: colorsheme[start + 0],
                                },
                                {
                                    color: colorsheme[start + 1],
                                },
                                {
                                    color: colorsheme[start + 2],
                                },
                            ],
                            legend: {
                                position: 'bottom',
                                alignment: 'center',
                                textStyle: {
                                    color: '#ffdc5a',
                                    fontSize: 12
                                },
                            },
                            border: {
                                color: 'red',
                            },
                            tooltip: {
                                showColorCode: true,
                            },
                            chartArea: {
                                left: 0,
                                top: 0,
                                width: '100%',
                                height: '60%',
                            }
                        }}
                        width={'100%'}
                        height={'400px'}
                        legend_toggle
                    />
                </ResponsiveContainer>
            </div>
            <h4 style={{margin: '0 5px', padding: 0}}>
                {comp[1].value}
            </h4>
        </Col>
 </Row>
}
埃切

问题出在parseInt方法上。我不知道为什么,但是当我删除它时,图表就起作用了。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章