создание гистограммы с использованием Highcharts с React - получение ошибки о том, что визуализация div не найдена

Я пытаюсь создать гистограмму с помощью Highcharts в своем веб-приложении, которое использует React в интерфейсе пользователя. Ниже приведен фрагмент моего файла dashboard.tsx, где я просто скопировал и вставил код из JSFiddle (http://jsfiddle.net/8qjcz4q0/), который отображает простую гистограмму с помощью Highcharts, но по какой-то причине он не работает, и я получаю сообщение об ошибке в моей консоли (ошибка Highcharts # 13), что блок визуализации не отображается .

 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.


reactjs highcharts react-highcharts
person AliciaGuerra    schedule 03.05.2017    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Чтобы ответить на мой собственный вопрос, функция рендеринга вызывается после того, как highcharts пытается найти div. Вы можете поместить код отрисовки диаграммы в раздел componentDidMount (), отрендерить код highcharts напрямую с помощью опасноSetInnerHTML или установить таймер в коде highcharts. Что касается другого ответа, проблема с прикреплением тега div к моему html заключается в том, что я визуализирую все остальное в JSX и, следовательно, хочу визуализировать свою диаграмму из моего JSX.

person AliciaGuerra    schedule 05.05.2017

arrow_upward
0
arrow_downward

Демо 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')
);
person Deep 3015    schedule 04.05.2017