javascript - 加载 highcharts-3d.js 后屏幕空白
问题描述
我正在使用 csvURL 函数来创建一个高图。下面的脚本有效,但是当我添加highcharts-3d.js以创建 3D 图表时,屏幕变为空白。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<!-- 2. Add the JavaScript to initialize the chart on DOM loaded -->
<body>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
Highcharts.chart('container', {
chart: {
type: 'bar',
options3d: {
enabled: true,
alpha: 15,
beta: 0,
depth: 50,
viewDistance: 25
}
},
data: {
csvURL: 'https://raw.githubusercontent.com/peoplecure/FunTravel/master/fake%20column.csv'
},
title: {
text: 'Made up Data'
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontFamily: 'Arial',
fontSize: '12px'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Number of Cups'
}
},
exporting: {
enabled: false
},
credits: {
enabled: false
}
})
});
function showValues() {
$('#alpha-value').html(chart.options.chart.options3d.alpha);
$('#beta-value').html(chart.options.chart.options3d.beta);
$('#depth-value').html(chart.options.chart.options3d.depth);
}
// Activate the sliders
$('#sliders input').on('input change', function() {
chart.options.chart.options3d[this.id] = parseFloat(this.value);
showValues();
chart.redraw(false);
});
showValues();
</script>
<!-- 3. Add the container -->
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>
</html>
我将它插入头部:
<script src="/https://code.highcharts.com/highcharts-3d.js"><script>
我必须做什么才能创建 3D 图表?显然,我的方法行不通。
顺便说一句,对不起,宽敞的空间。我仅限于使用记事本,并且选项卡排列在此处粘贴不漂亮。
解决方案
脚本标签有错别字,添加不正确。改变这个
<script src="/https://code.highcharts.com/highcharts-3d.js"><script>
至
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
</head>
<!-- 2. Add the JavaScript to initialize the chart on DOM loaded -->
<body>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
Highcharts.chart('container', {
chart: {
type: 'bar',
options3d: {
enabled: true,
alpha: 15,
beta: 0,
depth: 50,
viewDistance: 25
}
},
data: {
csvURL: 'https://raw.githubusercontent.com/peoplecure/FunTravel/master/fake%20column.csv'
},
title: {
text: 'Made up Data'
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontFamily: 'Arial',
fontSize: '12px'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Number of Cups'
}
},
exporting: {
enabled: false
},
credits: {
enabled: false
}
})
});
function showValues() {
$('#alpha-value').html(chart.options.chart.options3d.alpha);
$('#beta-value').html(chart.options.chart.options3d.beta);
$('#depth-value').html(chart.options.chart.options3d.depth);
}
// Activate the sliders
$('#sliders input').on('input change', function() {
chart.options.chart.options3d[this.id] = parseFloat(this.value);
showValues();
chart.redraw(false);
});
showValues();
</script>
<!-- 3. Add the container -->
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>
</html>
推荐阅读
- android - 在android中以编程方式将EditText视图约束到复选框?
- sapui5 - 从 sap.ui.table.Table 获取特定值
- python - 如何优化我的代码(“你可以用多少种方法求一个数字的总和?”)
- asp.net - 升级 .net core 5.0 后时区已更改
- laravel - 如何使用 nginx 部署 Nextjs/Laravel 项目?
- node.js - 为什么 Docker Image 对于 node js 应用程序变得如此之大
- sql - 在sql oracle中为相同的ID从不同的行中选择不同的列值
- java - Java DOM Element,如何找到 Element 值的实际数据类型?截至目前,一切都被视为字符串
- spring-boot - 如果在 API 端点路由中通过 @RequestParam,Istio 虚拟服务会给出 404
- qt - 在 goto 语句上使用断点的问题