Попытка получить пример с высоким качеством, работающий на локальной машине

Я новичок в высоких диаграммах/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-файла.

Когда я загружаю HTML-файл в Chrome, ничего не происходит.

Может ли кто-нибудь посоветуете?

источник

2013-03-05 spoolup

проверьте на наличие ошибок в консоли как на старте ...! –

и у вас есть элемент с идентификатором «контейнер» в вашем html ..? –

Да, я добавил HTML выше. – spoolup

Ваш html-код не показывает ссылку на ваш собственный файл chart1.js.

источник

2013-03-05 05:23:44 GvM

так что был мой вопрос. в jfiddle он никогда не загружается в html, который я не понял .... это особая особенность jfiddle? Я также попытался добавить , но, похоже, не работает. – spoolup

jsFiddle автоматически включит скрипт, который вы вводите в рамку Javascript, в область результатов (он фактически включает его прямо в раздел главы созданного html-документа). В chrome вы можете просмотреть панель и посмотреть полностью созданный html-документ, который находится внутри iframe. К вашему вопросу: можете ли вы проверить консоль javascript в chrome и посмотреть, есть ли у вас какие-либо ошибки? – GvM

Используйте приведенный ниже код и поместить его в файл .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>

I надеюсь эта помощь.

источник

2013-07-12 02:01:38 victor

+1 начал меня как минимум ... – user949300

протестирован, работает! – hdoghmen

вы должны включить JQuery в вашем HTML файле:

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

и он будет работать.

источник

2014-01-11 09:32:27 Mor

Попытка получить пример с высоким качеством, работающий на локальной машине

ответ

Смежные вопросы