在 highcharts/miso 中渲染图表答案

【问题标题】：Rendering a graph in highcharts/miso在 highcharts/miso 中渲染图表
【发布时间】：2013-01-10 16:58:08
【问题描述】：

我正在尝试使用 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 开发人员，我通过犯很多错误学到了很多东西。任何帮助将不胜感激！

【问题讨论】：

您的脚本不应放在

标签： javascript highcharts

【解决方案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
      }]
    });
  }
});
});

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

【讨论】：

【解决方案2】：

实际上是计算输出并保存在 js 控制台中。你不是说要在 html 级别显示它。为了解决这个问题，将 js 控制台的输出传递给 html 输出。

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

【讨论】：