使用 Highcharts 和 React 创建条形图 - 出现未找到渲染 div 的错误

IT技术 reactjs highcharts react-highcharts
2021-05-01 00:52:00

我正在尝试在我的 Web 应用程序中使用 Highcharts 创建一个条形图，该应用程序在前端使用 React。下面是我的 dashboard.tsx 文件的片段，我基本上只是从 JSFiddle ( http://jsfiddle.net/8qjcz4q0/ )复制并粘贴了代码，该代码使用 Highcharts 呈现一个简单的条形图，但由于某种原因，它不是工作，我在我的控制台中收到一个错误（Highcharts 错误 #13），渲染 div 没有显示。

 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import * as Highcharts from "highcharts";

 Highcharts.chart('container', {
   chart: {
    type: 'column'
   },
  title: {
    text: 'World\'s largest cities per 2014'
   },
 subtitle: {
    text: 'Source: Wikipedia'
  },
  xAxis: {
    type: 'category',
    labels: {
        rotation: -45,
        style: {
            fontSize: '13px',
            fontFamily: 'Verdana, sans-serif'
        }
      }
   },
   yAxis: {
    min: 0,
    title: {
        text: 'Population (millions)'
    }
   },
legend: {
    enabled: false
},
tooltip: {
    pointFormat: 'Population in 2008: <b>{point.y:.1f} millions</b>'
},
series: [{
    name: 'Population',
    data: [
        ['Shanghai', 23.7],
        ['Lagos', 16.1],
        ['Istanbul', 14.2],
        ['Karachi', 14.0],
        ['Mumbai', 12.5],
        ['Moscow', 12.1],
        ['São Paulo', 11.8],
        ['Beijing', 11.7],
        ['Guangzhou', 11.1],
        ['Delhi', 11.1],
        ['Shenzhen', 10.5],
        ['Seoul', 10.4],
        ['Jakarta', 10.0],
        ['Kinshasa', 9.3],
        ['Tianjin', 9.3],
        ['Tokyo', 9.0],
        ['Cairo', 8.9],
        ['Dhaka', 8.9],
        ['Mexico City', 8.9],
        ['Lima', 8.9]
    ],

 }]
});
render() {
     return ( <div>
        <div id="container"></div>
        </div>
    );
  }
}

我怀疑 HTML id 属性不适用于 React，但我不知道 Highcharts 是否可以呈现为类而不是 id。

2个回答

在这里回答我自己的问题，在 highcharts 尝试查找 div 后调用渲染函数。您可以将图表渲染代码放在 componentDidMount() 部分，直接使用危险的SetInnerHTML 渲染 highcharts 代码，或者在 highcharts 代码上设置计时器。对于另一个答案，在我的 html 中粘贴 div 标签的问题是我正在 JSX 中呈现其他所有内容，因此想要从我的 JSX 内部呈现我的图表。

JS bin演示

html

<!DOCTYPE html>
<html>
<head>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/react-highcharts/11.0.0/ReactHighcharts.js"></script>
    <meta charset="utf-8">
    <title>React-highcharts</title>
</head>
<body>
  <div id="container"></div>
</body>
</html>

JS部分

var config = {
    chart: {
        type: 'column'
    },
    title: {
        text: 'World\'s largest cities per 2014'
    },
    subtitle: {
        text: 'Source: <a href="http://en.wikipedia.org/wiki/List_of_cities_proper_by_population">Wikipedia</a>'
    },
    xAxis: {
        type: 'category',
        labels: {
            rotation: -45,
            style: {
                fontSize: '13px',
                fontFamily: 'Verdana, sans-serif'
            }
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Population (millions)'
        }
    },
    legend: {
        enabled: false
    },
    tooltip: {
        pointFormat: 'Population in 2008: <b>{point.y:.1f} millions</b>'
    },
    series: [{
        name: 'Population',
        data: [
            ['Shanghai', 23.7],
            ['Lagos', 16.1],
            ['Istanbul', 14.2],
            ['Karachi', 14.0],
            ['Mumbai', 12.5],
            ['Moscow', 12.1],
            ['São Paulo', 11.8],
            ['Beijing', 11.7],
            ['Guangzhou', 11.1],
            ['Delhi', 11.1],
            ['Shenzhen', 10.5],
            ['Seoul', 10.4],
            ['Jakarta', 10.0],
            ['Kinshasa', 9.3],
            ['Tianjin', 9.3],
            ['Tokyo', 9.0],
            ['Cairo', 8.9],
            ['Dhaka', 8.9],
            ['Mexico City', 8.9],
            ['Lima', 8.9]
        ],

    }]
};

ReactDOM.render(
  <ReactHighcharts config = {config}/>,
  document.getElementById('container')
);
其它你可能感兴趣的问题
上一篇构造函数中的 bind(this) 在 ReactJS 中做什么 下一篇类型错误：流未定义