试图获得在本地机器上工作的高图例

我是新来的高图/ jquery，并试图将html和js复制到本地驱动器上的两个文件中，以查看我是否可以在我的大型浏览器中呈现它。试图获得在本地机器上工作的高图例

我的基本问题是如何在jfiddle中使用高图表提供的示例代码之一，并让它在我的本地机器上工作？

从highcharts.com的示例代码中jfiddle在这里工作： http://jsfiddle.net/m3MVk/

$(function() { 
var chart; 
$(document).ready(function() { 
    chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      type: 'line', 
      marginRight: 130, 
      marginBottom: 25 
     }, 
     title: { 
      text: 'Monthly Average Temperature', 
      x: -20 //center 
     }, 
     subtitle: { 
      text: 'Source: WorldClimate.com', 
      x: -20 
     }, 
     xAxis: { 
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
       'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
     }, 
     yAxis: { 
      title: { 
       text: 'Temperature (°C)' 
      }, 
      plotLines: [{ 
       value: 0, 
       width: 1, 
       color: '#808080' 
      }] 
     }, 
     tooltip: { 
      formatter: function() { 
        return '<b>'+ this.series.name +'</b><br/>'+ 
        this.x +': '+ this.y +'°C'; 
      } 
     }, 
     legend: { 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'top', 
      x: -10, 
      y: 100, 
      borderWidth: 0 
     }, 
     series: [{ 
      name: 'Tokyo', 
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] 
     }, { 
      name: 'New York', 
      data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5] 
     }, { 
      name: 'Berlin', 
      data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0] 
     }, { 
      name: 'London', 
      data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] 
     }] 
    }); 
}); 

});

HTML：

<script src="http://code.highcharts.com/highcharts.js"></script> 

<script src="http://code.highcharts.com/modules/exporting.js"></script> 

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

然后一个文件夹中我做了两个文件：chart1.js和chart1.html与他们上面的代码。

我还将最新的jquery保存到文件夹中，作为jquery-1.9.1.js 然后我将其添加到html文件的顶部。

当我在Chrome中加载HTML文件时，没有任何反应。

有人能请指教吗？

来源

2013-03-05 spoolup

检查控制台中的错误作为开始...！ – 2013-03-05 04:25:01

和你有你的HTML ..中的ID“容器”元素？ – 2013-03-05 04:27:37

是的，我现在添加了上面的HTML。 – spoolup 2013-03-05 04:38:35

您的html代码不显示对您自己的chart1.js文件的引用。

来源

2013-03-05 05:23:44 GvM

所以这是我的问题。在jfiddle中它永远不会加载在我不明白的HTML中....这是jfiddle的特殊功能吗？我也尝试添加但似乎不起作用。 – spoolup 2013-03-08 01:29:23

jsFiddle会自动将您在Javascript框架中输入的脚本包含到结果窗格中（它实际上会将其包含在创建的html文档的头部分中）。在Chrome中，您可以检查该窗格并查看驻留在iframe内的完全创建的html文档。对于你的问题：你能检查铬控制台的JavaScript控制台，看看你是否有任何错误？ – GvM 2013-03-11 16:48:06

使用下面的代码，并把它放在一个.html文件（例如：Chart.html）

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
    <title> 
     Chart 
    </title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script> 
    <script src="http://code.highcharts.com/highcharts.js" type="text/javascript"></script> 
    <script src="http://code.highcharts.com/modules/exporting.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(function() { 
      $('#container').highcharts({ 
       title: { 
        text: 'Monthly Average Temperature', 
        x: -20 //center 
       }, 
       subtitle: { 
        text: 'Source: WorldClimate.com', 
        x: -20 
       }, 
       xAxis: { 
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
         'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
       }, 
       yAxis: { 
        title: { 
         text: 'Temperature (°C)' 
        }, 
        plotLines: [{ 
         value: 0, 
         width: 1, 
         color: '#808080' 
        }] 
       }, 
       tooltip: { 
        valueSuffix: '°C' 
       }, 
       legend: { 
        layout: 'vertical', 
        align: 'right', 
        verticalAlign: 'middle', 
        borderWidth: 0 
       }, 
       series: [{ 
        name: 'Tokyo', 
        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] 
       }, { 
        name: 'New York', 
        data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5] 
       }, { 
        name: 'Berlin', 
        data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0] 
       }, { 
        name: 'London', 
        data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] 
       }] 
      }); 
     }); 
    </script> 
    </head> 
    <body> 
    <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> 
    </body> 
</html>

更改的文件到您的本地文件路径

<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script> 
<script src="http://code.highcharts.com/highcharts.js" type="text/javascript"></script> 
<script src="http://code.highcharts.com/modules/exporting.js" type="text/javascript"></script>

我参考希望这个帮助。

来源

2013-07-12 02:01:38 victor

+1让我开始至少... – user949300 2013-11-26 22:49:58

测试，工作！ – hdoghmen 2017-07-20 12:55:38

你应该包括jQuery的HTML文件中：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"

，它会工作。

来源

2014-01-11 09:32:27 Mor

试图获得在本地机器上工作的高图例

回答

相关问题