使用Highcharts和React创建条形图 - 获取渲染div未找到的错误 [英] creating a bar chart using Highcharts with React - getting an error that rendering div isn't found

问题描述

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

  import * as React fromreact; 
导入*为react-dom中的ReactDOM; 
导入*为highcharts的高级图表; 
 
 Highcharts.chart（'container'，{
 chart：{
 type：'column'
}，
 title：{
文本：'2014年全球最大城市'
}，
副标题：{
 text：'来源：维基百科'
}，
 xAxis：{ 
 type：'category'，
 labels：{
 rotation：-45，
 style：{
 fontSize：'13px'，
 fontFamily：' Verdana，sans-serif'
} 
} 
}，
 yAxis：{
 min：0，
 title：{
 text： '人口（百万）'
} 
}，
图例：{
启用：false 
}，
工具提示：{
 pointFormat： '2008年人口： {point.y：.1f}百万'
}，
系列：[{
 name：'Population'，
数据：[
 ['上海'，23.7]，
 ['拉各斯'，16.1]，
 ['伊斯坦布尔'，14.2]，
 ['卡拉奇'，14.0 ] 
 ['Mumbai'，12.5]，
 ['莫斯科'，12.1]，
 ['圣保罗'，11.8]，
 ['北京'，11.7]，
 ['广州'，11.1]，
 ['Delhi'，11.1]，
 ['深圳'，10.5]，
 ['汉城'，10.4]，
 ['Jakarta'，10.0]，
 ['Kinshasa'，9.3]，
 ['Tianjin'，9.3]，
 ['东京'，9.0]，
 [ '开罗'，8.9]，
 ['达卡'，8.9]，
 ['墨西哥城'，8.9]，
 ['Lima'，8.9] 
]，
 
}] 
}）; 
 render（）{
 return（< div> 
< div id =container>< / div> 
< / div> 
 ）; 
} 
} 
  

我怀疑HTML id属性没有使用React，但我不知道Highcharts是否可以呈现给类而不是id。

在这里，highcharts尝试查找div后调用渲染函数。您可以将图表渲染代码放在componentDidMount（）部分中，直接使用dangerouslySetInnerHTML渲染高位代码，或在高位代码上设置一个定时器。
在另一个答案中，将div标签粘贴在我的html中的问题是我在JSX中渲染了其他所有内容，因此想从我的JSX内部渲染我的图表。

I'm trying to create a bar chart with Highcharts in my web application, which uses React on the front end. Below is a snippet of my dashboard.tsx file, where I basically just copied and pasted the code from a JSFiddle (http://jsfiddle.net/8qjcz4q0/) that renders a simple bar chart with Highcharts, but for some reason it's not working and I get an error in my console (Highcharts error #13) that the rendering div isn't showing.

 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>
    );
  }
}

My suspicion is that the HTML id attribute doesn't work with React, but I don't know if Highcharts can render to class instead of id.

解决方案

To answer my own question here, the render function is called after highcharts attempts to look for the div. You can put the chart rendering code in the componentDidMount() section, render the highcharts code directly using dangerouslySetInnerHTML, or set a timer on the highcharts code. To the other answer, the problem with sticking the div tag in my html is that I'm rendering everything else in the JSX and thus want to render my chart from inside my JSX.

这篇关于使用Highcharts和React创建条形图 - 获取渲染div未找到的错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！