我正在尝试使用 Highcharts.js 和 misodatest (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 开发者，我通过犯很多错误学到了很多东西。非常感激任何的帮助！
