在highcharts /味噌中呈现图形

我想玩Highcharts.js和misodatest（www.misoproject.com/dataset）。我所做的只是添加了http://misoproject.com/dataset/examples/highstockandcsv.html处的示例脚本。在highcharts /味噌中呈现图形

它不会运行，所以我编辑它到我认为应该发生的地方，我把这个例子的一些东西放到函数（）中。现在，我没有任何错误，这很好。但是，我的网页中根本没有任何信息，我不知道为什么，图形根本就没有渲染。

这里是我的代码：

<!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开发我正在通过制定了很多错误学到了很多东西。非常感激任何的帮助！

来源

2013-01-10 Charlotte Spencer

的标签后，您不应该有你的脚本。它们应位于或块内。在这种情况下可能不是你的问题，但它的不好的做法，并可能导致在一些浏览器中的错误 –

此外，我不知道任何关于misodatest，但图表呈现在由数据集提取的对象的成功方法。我的猜测是抓取失败，该方法永远不会被调用。您可以使用浏览器调试工具来确定方法是否正在运行。如果不是，那么你需要弄清楚为什么。 –

非常感谢你本，我喜欢了解我的不良做法，所以我可以改善我的代码:) –

看来我已经修复了它。我需要$（文件）。就绪（添加到我的功能，包括所有的脚本的这样：

$(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 
     }] 
    }); 
    } 
}); 
});

如果有人遇到同样的问题，我希望这有助于

来源

2013-01-10 17:08:19

其实！输出是计算并保存在js控制台中，你不告诉在html级别显示它要解决这个问题，请将js控制台的输出结果传递给html输出

在chrome中，转到开发工具（F12 ），然后转到控制台，您可以在问题中看到您输入的代码ñ。所以输出结果正在显示，只需将它输出到html前端即可。对于这一点，你可以从这个答案使用方法：Javascript: console.log to html

来源

2016-07-07 09:23:32 Aravind

在highcharts /味噌中呈现图形

回答

相关问题