我正在尝试通过本教程实现 Highcharts https://www.highcharts.com/docs/getting-started/your-first-chart但出现此错误:
未捕获( promise )错误:Highcharts 错误 #13:www.highcharts.com/errors/13
这意味着要渲染的 div 不存在，但我很确定我的代码中有一个具有正确类的 div:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.30.7/react-bootstrap.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/babel" src="/js/dashboard.js"></script>
<!--link custom css file-->
<link rel="stylesheet" type="text/css" href="/css/style.css">
</head>
<body>
<div class="container">
<h1 class="text-center">Your Dashboard</h1>
<div class="row">
<div class="col-xs-7">
<h3 class="text-center">Calories Today</h3>
<div class="top-left" id="cal-line">
</div>
</div>
<div class="col-xs-5">
<h3 class="text-center">Calories Over Time</h3>
<div class="top-right" id="cal-today" style="width:100% height:400px;">
</div>
</div>
</div>
</div>
</body>
</html>
这是我在/js/dashboard.js 中的 JS:
/*global React*/
/*global ReactBootstrap*/
/*global ReactDOM*/
/*global fetch*/
/*global location*/
/*global Highcharts*/
/*global $*/
//variable to hold user data from API fetch
let user = {};
const fb_id = location.pathname.replace("/users/","");
$(document).ready(function() {
fetch("https://www.url.com/usersdata/" + fb_id)
.then(rsp => rsp.json())
.then(json => {
//we fetched the user data
if(json.error && json.error.message){
throw new Error(json.error.message);
}
user = json;
console.log(json);
$(function(){
const myChart = Highcharts.chart('top-right',{
chart:{
type: 'bar'
},
title:{
text: 'Calories Over Time'
},
xAxis:{
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis:{
title:{
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1,0,4]
},{
name: 'John',
data: [5,7,3]
}]
});
});
});
});
任何人都可以帮助我解决我做错的事情吗？
最佳答案
<div>内标签，您应该使用“id”而不是“class”来引用您的图表。
此外，当您引用包含 highchart 的外部 js 时，请将其添加到 body 标记中而不是 head 中。
这是我的工作代码。
<html>
<head>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<link rel="stylesheet" type="text/css" href="sytlels.css">
</head>
<body>
<div id="container"></div>
<script src="highChart.js"></script>
</body>
</html>关于javascript - Highcharts错误13，但渲染Div存在，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43973659/