Question

我正在尝试使用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开发我通过犯很多错误而学到很多东西。任何帮助都将非常感激！

Answer 1

好像我已修好了。我需要添加$（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
      }]
    });
  }
});
});

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

Answer 2

实际上输出是在js控制台中计算并保存的。你没有告诉在html级别显示它。要解决此问题，请将js控制台的输出传递给html输出。

在chrome中，转到开发工具（F12）并转到控制台。在那里，您可以看到问题中给出的代码所需的输出。所以输出显示，只是把它带到html前面。为此，您可以使用此答案中的方法：Javascript: console.log to html

在highcharts / miso中渲染图形

2 个答案: