在highcharts/miso中渲染图形
我正在尝试玩Highcharts.js和一个错误测试(www.misoproject.com/dataset)。我所做的只是添加了http://misoproject.com/dataset/examples/highstockandcsv.html中给出的示例脚本。
它不会运行，所以我将它编辑为我认为应该发生的情况，我将示例的一些内容放入一个函数()中。现在，我没有得到任何错误，这将是很好的。但是我在我的页面上根本没有得到任何信息，我也不知道为什么，这个图表根本就没有渲染。
下面是我的代码：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<br>
<div id="test" style="max-width: 800px; height: 300px; margin: 0 auto"></div> <!-- Container for Highcharts map. -->
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="json2.js"></script>
<script src="lodash.js"></script>
<script src="moment.js"></script>
<script src="underscore.deferred.js"></script>
<script src="underscore.math.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="miso.ds.0.3.0.js"></script>
<script>
function chart() {
var ds = new Miso.Dataset({
url : "crudeoil.csv",
delimiter : ",",
columns : [{ name : "Year", type : "time", format : "YYYY" }]
});
ds.fetch({
success : function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'test',
type: 'column',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'World Crude Oil Barrel Production (1,000) per unit',
x: -20 //center
},
subtitle: {
text: 'Src: http://www.infochimps.com/datasets/world-crude-oil-production-1980-to-2004',
x: -20
},
xAxis: {
categories: _.map(this.column("Year").data, function(year) {
return year.format("YY");
})
},
yAxis: {
title: {
text: this.columnNames()[1]
},
plotLines: [{
value: 0,
width: 10000,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [{
name: 'World Production',
data: this.column("Crude oil production (1000 barrels per day)").data
}]
});
}
});
}
</script>
</html>我知道我可能只是没有掌握一些基本的东西，作为一个初学者JS开发人员，我通过犯很多错误学到了很多东西。如有任何帮助，将不胜感激！
回答 2
Stack Overflow用户
发布于 2013-01-11 01:08:19
看起来我已经修好了。我需要将$(document).ready(添加到包含所有脚本的函数中。所以：
$(document).ready(function() {
var ds = new Miso.Dataset({
url : "crudeoil.csv",
delimiter : ",",
columns : [{ name : "Year", type : "time", format : "YYYY" }]
});
ds.fetch({
success : function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'test',
type: 'column',
marginRight: 130,
marginBottom: 25
},
title: {
text : 'World Crude Oil Barrel Production (1,000) per unit',
x: -20 //center
},
subtitle: {
text: 'Src: http://www.infochimps.com/datasets/world-crude-oil-production-1980-to-2004',
x: -20
},
xAxis: {
categories: _.map(this.column("Year").data, function(year) {
return year.format("YY");
})
},
yAxis: {
title: {
text: this.columnNames()[1]
},
plotLines: [{
value: 0,
width: 10000,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [{
name: 'World Production',
data: this.column("Crude oil production (1000 barrels per day)").data
}]
});
}
});
});如果有人遇到同样的问题，我希望这能有所帮助！
Stack Overflow用户
发布于 2016-07-07 17:23:33
实际上，输出被计算并保存在js控制台中。您没有告诉在html级别中显示它。要解决此问题，请将输出从js控制台传递到html输出。
在chrome中，转到开发工具(F12)，然后转到控制台。在这里，您可以看到问题中给出的代码所需的输出。输出已经显示出来了，只需把它放到html的前面。为此，您可以使用以下答案中的方法：Javascript: console.log to html
https://stackoverflow.com/questions/14263193
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号