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

Answer 3

看起来问题已解决 - 但如果您遇到此问题并且接受的解决方案不起作用，则可能是因为您网站上的 CSP 限制。

谷歌声明：

但是，与其他数据可视化工具不同，Google Charts 不 在客户端渲染所有图表。相反，对于某些 图表，他们将数据传递到谷歌服务器，在那里呈现图表， 然后将结果显示在页面上。

请注意，如果您向他们发送客户数据，这可能会影响您的服务条款。