Javascript 在highcharts/miso中呈现图形_Javascript_Highcharts

Javascript 在highcharts/miso中呈现图形

javascript highcharts

Javascript 在highcharts/miso中呈现图形,javascript,highcharts,Javascript,Highcharts,我正在尝试使用Highcharts.js和misodatest（www.misoproject.com/dataset）。我所做的只是添加了在中给出的示例脚本它不会运行，所以我将其编辑为我认为应该发生的，我将示例中的一些内容放入函数（）。现在，我没有收到任何错误，这将是伟大的。但是我在我的页面中根本没有得到任何信息，我也不知道为什么，图形根本没有呈现这是我的密码： <!DOCTYPE html> <html> <head> </head

我正在尝试使用Highcharts.js和misodatest（www.misoproject.com/dataset）。我所做的只是添加了在中给出的示例脚本

它不会运行，所以我将其编辑为我认为应该发生的，我将示例中的一些内容放入函数（）。现在，我没有收到任何错误，这将是伟大的。但是我在我的页面中根本没有得到任何信息，我也不知道为什么，图形根本没有呈现

这是我的密码：

<!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>




功能图（）{
var ds=新的Miso.Dataset({
url:“crudeoil.csv”，
分隔符：“，”，
列：[{名称：“年”，类型：“时间”，格式：“YYYY”}]
}); 
去取({
成功：函数（）{
图表=新的高点图表。图表({
图表：{
renderTo:'测试'，
键入：“列”，
marginRight:130，
marginBottom:25
},
标题：{
正文：“世界原油每桶产量（1000）单位”，
x:-20/中心
},
副标题:{
文本：“Src:http://www.infochimps.com/datasets/world-crude-oil-production-1980-to-2004',
x:-20
},
xAxis：{
类别：u.map（此列（“年”）。数据，函数（年）{
返回年份。格式（“YY”）；
})
},
亚克斯：{
标题：{
text:this.columnNames（）[1]
},
绘图线：[{
值：0，
宽度：10000，
颜色：'#808080'
}]
},
工具提示：{
格式化程序：函数（）{
返回“+this.series.name+”
+
this.x+'：'+this.y；
}
},
图例：{
布局：“垂直”，
对齐：“右”，
垂直排列：“顶部”，
x:-10，
y:100，
边框宽度：0
},
系列：[{
名称：“世界生产”，
数据：本栏（“原油产量（每天1000桶）”）。数据
}]
});
}
});
}

我知道我可能只是没有掌握一些基本的东西，作为一个JS开发的初学者，我通过犯很多错误学到了很多东西。任何帮助都将不胜感激

看来我已经修好了。我需要将$（document.ready）添加到包含所有脚本的函数中。因此：

$（文档）.ready（函数（）{
var ds=新的Miso.Dataset({
url:“crudeoil.csv”，
分隔符：“，”，
列：[{名称：“年”，类型：“时间”，格式：“YYYY”}]
}); 
去取({
成功：函数（）{
图表=新的高点图表。图表({
图表：{
renderTo:'测试'，
键入：“列”，
marginRight:130，
marginBottom:25
},
标题：{
正文：“世界原油每桶产量（1000）单位”，
x:-20/中心
},
副标题:{
文本：“Src:http://www.infochimps.com/datasets/world-crude-oil-production-1980-to-2004',
x:-20
},
xAxis：{
类别：u.map（此列（“年”）。数据，函数（年）{
返回年份。格式（“YY”）；
})
},
亚克斯：{
标题：{
text:this.columnNames（）[1]
},
绘图线：[{
值：0，
宽度：10000，
颜色：'#808080'
}]
},
工具提示：{
格式化程序：函数（）{
返回“+this.series.name+”
+
this.x+'：'+this.y；
}
},
图例：{
布局：“垂直”，
对齐：“右”，
垂直排列：“顶部”，
x:-10，
y:100，
边框宽度：0
},
系列：[{
名称：“世界生产”，
数据：本栏（“原油产量（每天1000桶）”）。数据
}]
});
}
});
});

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

实际上，输出是计算出来的，并保存在js控制台中。您不会告诉我们在html级别显示它。要解决这个问题，请将js控制台的输出传递给html输出

在chrome中，转到dev tools（F12）并转到console。在那里，您可以看到问题中给出的代码所需的输出。因此，显示输出，只需将其放到html前端。为此，您可以使用以下答案中的方法：

您不应该将脚本放在标记之后。它们应该在或块中。在这种情况下，可能不是您的问题，但这是一种不良做法，可能会在某些浏览器中导致错误。因此，我不知道misodatest的任何信息，但图表是在数据集获取对象的成功方法中呈现的。我的问题是：ss表示提取失败，并且该方法从未被调用。您可以使用浏览器调试工具确定该方法是否正在运行。如果没有，则需要找出原因。非常感谢Ben，我喜欢了解我的错误做法，以便改进代码：）

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