2015-02-28 11 views
0

Я хочу создать несколько слайдов, Javascript, и используйте Reveal библиотеки и следовать шаблону https://github.com/hakimel/reveal.js/blob/master/index.htmlКак исправить JavaScript «анонимная функцию»

и планирую встроить диаграммы в слайды библиотеки echarts и следуйте это демо http://ecomfe.github.io/echarts/doc/start-en.html

Я поместил эти две библиотеки, следуя каталогу без каких-либо изменений в echarts/library.

|--echarts-2.2.0 
|--reveal.js 
\--mySlides.html 

Когда я слит эти два демо вместе, я получил «анонимные функции» из «require.config». Не знаю, как отладить его. Кто-нибудь может это помочь? Благодарю.

Uncaught ReferenceError: Reveal не определен (анонимную функция) mySlides.html: 36

mySlides.html

<!DOCTYPE html> 
<head> 
    <meta charset="utf-8"> 

    <title>reveal.js - The HTML Presentation Framework</title> 

    <meta name="description" content="A framework for easily creating beautiful presentations using HTML"> 
    <meta name="author" content="Hakim El Hattab"> 

    <meta name="apple-mobile-web-app-capable" content="yes" /> 
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> 

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui"> 

    <link rel="stylesheet" href="reveal.js/css/reveal.css"> 
    <link rel="stylesheet" href="reveal.js/css/theme/black.css" id="theme"> 

    <!-- Code syntax highlighting --> 
    <link rel="stylesheet" href="reveal.js/lib/css/zenburn.css"> 
</head> 
<body> 

<div class="reveal"> 

    <!-- Any section element inside of this container is displayed as a slide --> 
    <div class="slides"> 

      <section id="page1" data-background="#ff0000"> 
        <div id="main" style="height:400px"></div> 
        <!-- ECharts单文件引入 --> 
        <script src="echarts-2.2.0/build/dist/echarts.js"></script> 
        <script type="text/javascript"> 
         require.config({ 
          paths: { 
           echarts: 'echarts-2.2.0/build/dist' 
          } 
         }); 

         // 使用 
         require(
           [ 
            'echarts', 
            'echarts/chart/bar' 
           ], 
           function (ec) { 
            var myChart = ec.init(document.getElementById('main')); 

            var option = { 
             tooltip: { 
              show: true 
             }, 
             legend: { 
              data:['销量'] 
             }, 
             xAxis : [ 
              { 
               type : 'category', 
               data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] 
              } 
             ], 
             yAxis : [ 
              { 
               type : 'value' 
              } 
             ], 
             series : [ 
              { 
               "name":"销量", 
               "type":"bar", 
               "data":[5, 20, 40, 10, 10, 20] 
              } 
             ] 
            }; 
            myChart.setOption(option); 
           } 
         ); 
        </script> 
      </section> 
      <section id="page2"><p>Page2</p></section> 
    </div> 

</div> 

<script src="reveal.js/lib/js/head.min.js"></script> 
<script src="reveal.js/js/reveal.js"></script> 

<script> 

    // Full list of configuration options available at: 
    // https://github.com/hakimel/reveal.js#configuration 
    Reveal.initialize({ 
     controls: true, 
     progress: true, 
     history: true, 
     center: true, 

     transition: 'slide', // none/fade/slide/convex/concave/zoom 

     // Optional reveal.js plugins 
     dependencies: [ 
      { src: 'reveal.js/lib/js/classList.js', condition: function() { return !document.body.classList; } }, 
      { src: 'reveal.js/plugin/markdown/marked.js', condition: function() { return !!document.querySelector('[data-markdown]'); } }, 
      { src: 'reveal.js/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector('[data-markdown]'); } }, 
      { src: 'reveal.js/plugin/highlight/highlight.js', async: true, condition: function() { return !!document.querySelector('pre code'); }, callback: function() { hljs.initHighlightingOnLoad(); } }, 
      { src: 'reveal.js/plugin/zoom-js/zoom.js', async: true }, 
      { src: 'reveal.js/plugin/notes/notes.js', async: true } 
     ] 
    }); 

</script> 

</body> 

ответ

0

Похоже, вы пропустили requirejs файл загрузчика. Поместите это в заголовок своего файла и сообщите мне, исправляет ли он это.

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.16/require.js"></script> 
+0

Uncaught ReferenceError: Reveal не определен (анонимная функция) \t mySlides.html: 37 Uncaught Ошибка: Несовместимость анонимного определения() модуля: функция() { \t \t \t root.Reveal = завод() ; \t \t \t return root.Reveal; \t \t} http://requirejs.org/docs/errors.html#mismatch makeError \t require.js: 166 intakeDefines \t require.js: 1236 (анонимная) функция \t require.js: 1423 –

+0

После просмотра в вашем коде немного ближе, есть и ряд других вещей, которые также выглядят проблематичными. Почему вы включаете так много файлов, используя теги скриптов, если вы используете requirejs? Например, файл echartsjs включен в строку 31, а затем снова требуется в строке 42. Кроме того, если «dist» - это папка, в которой находится echarts, почему вы указываете requirejs, что это файл javascript? Я никогда не использовал ни одну из этих библиотек, поэтому я, возможно, не очень много помогу, но сначала я должен был прочитать на requirejs, а затем постепенно наращивать вашу страницу. – user2027202827

+0

Возможно, начните со страницы, используя строгое раскрытие, и после того, как она работает правильно, попробуйте добавить библиотеку диаграмм, чтобы в конце вашего журнала ошибок не появлялся небольшой роман. – user2027202827