反应谷歌图表不显示

问题描述

我的 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',parseInt(donut[start].value2.toLocaleString() * 100,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 方法中。我不知道为什么，但是当我删除它时，图表就起作用了。

,

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