React google 图表未显示

Question

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

我认为这个问题与浏览器、帐户、设备无关，但我无法找出问题所在？

Google 图表和重新图表在饼图中不起作用，但我的 Google 条形图在起作用。

当我尝试显示带有虚拟数据的饼图时，它起作用了。我认为我的数据有问题。

api:

[{"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>
}

Answer 1

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

Answer 2

import React from 'react'
import { Doughnut } from 'react-chartjs-2'

function BillingChart() {
  return (
    <div>
      <Doughnut
        data={{
          labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        }}
        height={400}
        width={600}
      />
    </div>
  )
}

export default BillingChart

React google 图表未显示

React google charts are not displaying

javascript

google-visualization

reactjs

react-google-charts