Question

我试图在我的网络应用程序中创建一个带有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。

Answer 1

要回答我自己的问题，在highcharts尝试查找div之后调用render函数。您可以将图表呈现代码放在componentDidMount（）部分中，使用dangerouslySetInnerHTML直接呈现highcharts代码，或在highcharts代码上设置计时器。对于另一个答案，在我的html中粘贴div标签的问题是我在JSX中渲染其他所有东西，因此想要从我的JSX中渲染我的图表。

Answer 2

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 Part

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

使用带有React的Highcharts创建条形图 - 获得渲染div未找到的错误

2 个答案: