无法从 kendo-react-all 加载 ChartArea、ChartSeries
Unable to load ChartArea, ChartSeries from kendo-react-all
我正在尝试 运行 一个示例来显示在 Kendo React 中创建的图表。
示例在本教程中:
https://www.telerik.com/kendo-react-ui/components/charts/chart/elements/chart-area/
我做了一些更改,以便能够通过浏览器 运行 它,而无需在本地安装 npm 包。但是,我无法显示它。我在控制台中收到错误消息
警告:React.createElement:类型无效 -- 应为字符串(对于内置组件)或 class/function(对于复合组件)但得到:未定义。您可能忘记从定义它的文件中导出您的组件,或者您可能混淆了默认导入和命名导入。
检查 ChartContainer
的渲染方法。在 ChartContainer
我错过了什么??
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.jsa/15.7.2/prop-types.min.js"></script>
<script src="https://unpkg.com/@progress/kendo-date-math/dist/cdn/js/kendo-date-math.js"></script>
<script src="https://unpkg.com/@progress/kendo-drawing/dist/cdn/js/kendo-drawing.js"></script>
<script src="https://unpkg.com/@progress/kendo-licensing/dist/index.js"></script>
<script src="https://unpkg.com/@progress/kendo-react-intl/dist/cdn/js/kendo-react-intl.js"></script>
<script src="https://unpkg.com/@progress/kendo-react-all/dist/cdn/js/kendo-react-all.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-material/dist/all.css">
</head>
<body>
<div id="mydiv"></div>
<script type="text/babel">
const data = [1, 2, 3, 5]
const Chart = window.KendoReactAll.Chart
const ChartArea = window.KendoReactAll.ChartArea
const ChartSeries = window.KendoReactAll.ChartSeries
const ChartSeriesItem = window.KendoReactAll.ChartSeriesItem
const ChartContainer = () => (
<Chart>
<ChartArea background="#eee" margin={30} />
<ChartSeries>
<ChartSeriesItem data={data} name="Fibonacci" />
</ChartSeries>
</Chart>
);
ReactDOM.render(<ChartContainer />, document.getElementById('mydiv'))
</script>
</body>
</html>
此片段失败的原因是因为在 kendo-react-all 库中找不到 ChartArea、ChartSeries 和 ChartSeriesItem。你需要导入 kendo-react-chart.js.
https://unpkg.com/@progress/kendo-react-charts/dist/cdn/js/kendo-react-charts.js
此外,您需要将源模块从 window.KendoReactAll
更改为 window.KendoReactCharts
最后应该是这样的:
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.jsa/15.7.2/prop-types.min.js"></script>
<script src="https://unpkg.com/@progress/kendo-date-math/dist/cdn/js/kendo-date-math.js"></script>
<script src="https://unpkg.com/@progress/kendo-drawing/dist/cdn/js/kendo-drawing.js"></script>
<script src="https://unpkg.com/@progress/kendo-licensing/dist/index.js"></script>
<script src="https://unpkg.com/@progress/kendo-react-intl/dist/cdn/js/kendo-react-intl.js"></script>
<script src="https://unpkg.com/@progress/kendo-react-all/dist/cdn/js/kendo-react-all.js"></script>
<script src="https://unpkg.com/@progress/kendo-react-charts/dist/cdn/js/kendo-react-charts.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-material/dist/all.css">
</head>
<body>
<div id="mydiv"></div>
<script type="text/babel">
const data = [1, 2, 3, 5]
const Chart = window.KendoReactCharts.Chart
const ChartArea = window.KendoReactCharts.Chart
const ChartSeries = window.KendoReactCharts.ChartSeries
const ChartSeriesItem = window.KendoReactCharts.ChartSeriesItem
const ChartContainer = () => (
<Chart>
<ChartArea background="#eee" margin={30} />
<ChartSeries>
<ChartSeriesItem data={data} name="Fibonacci" />
</ChartSeries>
</Chart>
);
ReactDOM.render(<ChartContainer />, document.getElementById('mydiv'))
</script>
</body>
</html>
我正在尝试 运行 一个示例来显示在 Kendo React 中创建的图表。
示例在本教程中: https://www.telerik.com/kendo-react-ui/components/charts/chart/elements/chart-area/
我做了一些更改,以便能够通过浏览器 运行 它,而无需在本地安装 npm 包。但是,我无法显示它。我在控制台中收到错误消息
警告:React.createElement:类型无效 -- 应为字符串(对于内置组件)或 class/function(对于复合组件)但得到:未定义。您可能忘记从定义它的文件中导出您的组件,或者您可能混淆了默认导入和命名导入。
检查 ChartContainer
的渲染方法。在 ChartContainer
我错过了什么??
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.jsa/15.7.2/prop-types.min.js"></script>
<script src="https://unpkg.com/@progress/kendo-date-math/dist/cdn/js/kendo-date-math.js"></script>
<script src="https://unpkg.com/@progress/kendo-drawing/dist/cdn/js/kendo-drawing.js"></script>
<script src="https://unpkg.com/@progress/kendo-licensing/dist/index.js"></script>
<script src="https://unpkg.com/@progress/kendo-react-intl/dist/cdn/js/kendo-react-intl.js"></script>
<script src="https://unpkg.com/@progress/kendo-react-all/dist/cdn/js/kendo-react-all.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-material/dist/all.css">
</head>
<body>
<div id="mydiv"></div>
<script type="text/babel">
const data = [1, 2, 3, 5]
const Chart = window.KendoReactAll.Chart
const ChartArea = window.KendoReactAll.ChartArea
const ChartSeries = window.KendoReactAll.ChartSeries
const ChartSeriesItem = window.KendoReactAll.ChartSeriesItem
const ChartContainer = () => (
<Chart>
<ChartArea background="#eee" margin={30} />
<ChartSeries>
<ChartSeriesItem data={data} name="Fibonacci" />
</ChartSeries>
</Chart>
);
ReactDOM.render(<ChartContainer />, document.getElementById('mydiv'))
</script>
</body>
</html>
此片段失败的原因是因为在 kendo-react-all 库中找不到 ChartArea、ChartSeries 和 ChartSeriesItem。你需要导入 kendo-react-chart.js.
https://unpkg.com/@progress/kendo-react-charts/dist/cdn/js/kendo-react-charts.js
此外,您需要将源模块从 window.KendoReactAll
更改为 window.KendoReactCharts
最后应该是这样的:
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.jsa/15.7.2/prop-types.min.js"></script>
<script src="https://unpkg.com/@progress/kendo-date-math/dist/cdn/js/kendo-date-math.js"></script>
<script src="https://unpkg.com/@progress/kendo-drawing/dist/cdn/js/kendo-drawing.js"></script>
<script src="https://unpkg.com/@progress/kendo-licensing/dist/index.js"></script>
<script src="https://unpkg.com/@progress/kendo-react-intl/dist/cdn/js/kendo-react-intl.js"></script>
<script src="https://unpkg.com/@progress/kendo-react-all/dist/cdn/js/kendo-react-all.js"></script>
<script src="https://unpkg.com/@progress/kendo-react-charts/dist/cdn/js/kendo-react-charts.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-material/dist/all.css">
</head>
<body>
<div id="mydiv"></div>
<script type="text/babel">
const data = [1, 2, 3, 5]
const Chart = window.KendoReactCharts.Chart
const ChartArea = window.KendoReactCharts.Chart
const ChartSeries = window.KendoReactCharts.ChartSeries
const ChartSeriesItem = window.KendoReactCharts.ChartSeriesItem
const ChartContainer = () => (
<Chart>
<ChartArea background="#eee" margin={30} />
<ChartSeries>
<ChartSeriesItem data={data} name="Fibonacci" />
</ChartSeries>
</Chart>
);
ReactDOM.render(<ChartContainer />, document.getElementById('mydiv'))
</script>
</body>
</html>