在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 /味噌中呈現圖形

回答

相關問題