Amcharts помещен в html

Очень странно, что в прошлый раз, когда я запускаю программу, все в порядке, но на этот раз это не сработает, веб-страница результатов пуста, и я действительно не знаю, где сделать ошибку. (Извините только добавить несколько слов Спасибо Спасибо Спасибо)Amcharts помещен в html

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8"> 
<title>My first stock chart</title> 
<link rel="stylesheet" href="amcharts/style.css" type="text/css"> 

<style> 
    #chartdiv 
    { 
     width  : 100%; 
     height  : 500px; 
     font-size : 11px; 
    } 
</style> 

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script> 
<script src="https://www.amcharts.com/lib/3/serial.js"></script> 
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script> 
<script src="https://www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js"></script> 

<script type="text/javascript"> 

AmCharts.loadFile("https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/22300.csv", {}, function (response) { 

     /** 
     * Parse CSV 
     */ 
     var data = AmCharts.parseCSV(response, { 
      "useColumnNames": true 
     }); 

     /** 
     * Create the chart 
     */ 
     var chart = AmCharts.makeChart("chartdiv", { 
      "type": "serial", 
      "theme": "light", 
      "dataProvider": data, 
      "valueAxes": [{ 
       "gridColor": "#FFFFFF", 
       "gridAlpha": 0.2, 
       "dashLength": 0 
      }], 
      "gridAboveGraphs": true, 
      "startDuration": 1, 
      "graphs": [{ 
       "balloonText": "[[category]]: <b>[[value]]</b>", 
       "fillAlphas": 0.8, 
       "lineAlpha": 0.2, 
       "type": "column", 
       "valueField": "visits" 
      }], 
      "chartCursor": { 
       "categoryBalloonEnabled": false, 
       "cursorAlpha": 0, 
       "zoomable": false 
      }, 
      "categoryField": "country", 
      "categoryAxis": { 
       "gridPosition": "start", 
       "gridAlpha": 0, 
       "tickPosition": "start", 
       "tickLength": 20 
      } 
     }); 

    }); 

</script> 
</head> 

<body> 

<div id="chartdiv"></div> 

</body> 

</html>

источник

2016-09-26 user6703592

Вы получаете какую-либо ошибку в консоли браузера? Код выглядит отлично. Вы также можете добавить 'console.log (data)' прямо после строки parseCSV, чтобы проверить, правильно ли проанализирован ваш CSV. – martynasma

Пробовал свой код. Прекрасно работает: http://codepen.io/team/amcharts/pen/d30bf8964f80003fd110798753678dd5 – martynasma

файл CSV, вероятно, кэшируются теперь в вашем браузере, это приводит к Amcharts немедленно создать таблицу. К сожалению, контейнер div еще не существует. Либо перенесите свой тег сценария инициализации диаграммы ниже диаграммы div, либо оберните его в DOMContentLoaded eventlistener или переместите скрипт в отдельный файл.

Вариант 1шаг тег сценария ниже целевого div

<body> 
    <div id="chartdiv"></div> 
    <script type="text/javascript"> 
     AmCharts.loadFile("https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/22300.csv", {}, function (response) { 

      /** 
      * Parse CSV .... 
      */ 

     }); 
    </script> 
</body>

Вариант 2обертывания инициализации вокруг DOMContentLoaded

document.addEventListener("DOMContentLoaded", function(event) { 
    AmCharts.loadFile("https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/22300.csv", {}, function (response) { 

     /** 
     * Parse CSV .... 
     */ 

    }); 
});

источник

2016-09-26 19:33:51 PierreDuc

как решить в коде? – user6703592

Кэширование здесь не должно быть проблемой. – martynasma

@martynasma Кэширование - не настоящая причина его проблемы, но именно поэтому в первый раз для него это не произошло. Поскольку для загрузки файла требуется некоторое время, целевой 'div' уже существует, когда вызывается' AmCharts.makeChart'. Из-за кэширования файл загружается немедленно, и 'AmCharts.makeChart' вызывается до того, как существует целевой div – PierreDuc

Amcharts помещен в html

ответ

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