2015-01-17 4 views
0

Im, пытающийся добавить этот код на мой сайт, построенный с помощью sandvox, через функцию «Сырой HTML». Когда я добавлю код, я просто вижу пустое поле на своем сайте. Я надеюсь, что я смогу немного помочь. Спасибо за любую помощь.Зачем нужен этот код на моем сайте

<html> 
<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script> 


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

<script> 
$(function() { 
    $('#container').highcharts({ 
     chart: { 
      type: 'column' 
     }, 
     title: { 
      text: 'Prevalence of Performance Enhancing Drug Use By Sport' 
     }, 
     subtitle: { 
      text: 'Source: <a href="http://www.samuelwbennett.com">getfast</a>' 
     }, 
     xAxis: { 
      type: 'category', 
      labels: { 
       rotation: -45, 
       style: { 
        fontSize: '13px', 
        fontFamily: 'Verdana, sans-serif' 
       } 
      } 
     }, 
     yAxis: { 
      min: 0, 
      title: { 
       text: 'Prevalence (%)' 
      } 
     }, 
     legend: { 
      enabled: false 
     }, 
     tooltip: { 
      pointFormat: 'PED Prevalence: <b>{point.y:.1f} %</b>' 
     }, 
     series: [{ 
      name: 'Prevalence', 
      data: [ 
       ['WADA All Pros', 2], 
       ['Child Athletes', 4], 
       ['HS Football', 6.3], 
       ['HS Seniors All Sports', 6.6], 
       ['Amatuer Weight-lifters', 8.2], 
       ['American Football', 9], 
       ['Baseball', 9.4], 
       ['Research Estimate All Pros', 10.2], 
       ['Top 100 Sprinters (running)', 40], 
       ['Professional Bodybuilders', 54], 
       ['Tour de France Winners', 79], 

      ], 
      dataLabels: { 
       enabled: true, 
       rotation: -90, 
       color: '#FFFFFF', 
       align: 'right', 
       x: 4, 
       y: -15, 
       style: { 
        fontSize: '13px', 
        fontFamily: 'Verdana, sans-serif', 
        textShadow: '0 0 3px black' 
       } 
      } 
     }] 
    }); 
}); 

</hmtl> 
+0

Что говорит консоль javascript в браузере? –

+0

Перед загрузкой 'highcharts' вам, вероятно, нужно загрузить' jQuery'. – Barmar

+0

Как добавить jquery перед добавлением высоких графиков? – Kamandsam

ответ

0

место JQuery скрипт, прежде чем Highcharts JS, и не забудьте закрыть ваш <script> тег

<html> 
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script> 
<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: 500px; height: 400px; margin: 0 auto"></div> 

<script> 
$(function() { 
    $('#container').highcharts({ 
     chart: { 
      type: 'column' 
     }, 
     title: { 
      text: 'Prevalence of Performance Enhancing Drug Use By Sport' 
     }, 
     subtitle: { 
      text: 'Source: <a href="http://www.samuelwbennett.com">getfast</a>' 
     }, 
     xAxis: { 
      type: 'category', 
      labels: { 
       rotation: -45, 
       style: { 
        fontSize: '13px', 
        fontFamily: 'Verdana, sans-serif' 
       } 
      } 
     }, 
     yAxis: { 
      min: 0, 
      title: { 
       text: 'Prevalence (%)' 
      } 
     }, 
     legend: { 
      enabled: false 
     }, 
     tooltip: { 
      pointFormat: 'PED Prevalence: <b>{point.y:.1f} %</b>' 
     }, 
     series: [{ 
      name: 'Prevalence', 
      data: [ 
       ['WADA All Pros', 2], 
       ['Child Athletes', 4], 
       ['HS Football', 6.3], 
       ['HS Seniors All Sports', 6.6], 
       ['Amatuer Weight-lifters', 8.2], 
       ['American Football', 9], 
       ['Baseball', 9.4], 
       ['Research Estimate All Pros', 10.2], 
       ['Top 100 Sprinters (running)', 40], 
       ['Professional Bodybuilders', 54], 
       ['Tour de France Winners', 79], 

      ], 
      dataLabels: { 
       enabled: true, 
       rotation: -90, 
       color: '#FFFFFF', 
       align: 'right', 
       x: 4, 
       y: -15, 
       style: { 
        fontSize: '13px', 
        fontFamily: 'Verdana, sans-serif', 
        textShadow: '0 0 3px black' 
       } 
      } 
     }] 
    }); 
}); 
</script> 

</hmtl> 
+0

Большое спасибо. этот код все еще не работает? – Kamandsam

+0

Это работа в моем местном, пропустить что-то? –

+0

Вот что я получаю, когда его опубликовано на моем сайте: http://imgur.com/SzCzISL – Kamandsam

0

Вы отсутствует закрывающий тег </script> в конце вашего Highcharts сценария. Добавление этого закрывающего тега и обеспечение загрузки jQuery перед загрузкой сценария Highcharts должно отлично работать.

Так оно и должно быть:

<html> 
<head> 
    <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script> 
    <script src="http://code.highcharts.com/highcharts.js"></script> 
    <script src="http://code.highcharts.com/modules/exporting.js"></script> 

    <script> 

     <!-- your Highcharts script here... --> 

    </script> 
</head> 

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

Рабочий пример можно увидеть here.

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