Задать вопрос
@s-zhura
javascript

Как вывести графики js из файла?

Есть несколько разных графиков js, которые вывожу на разных страницах так: <div id="chartContainer"></div>, <div id="chartContainer-2"></div>, <div id="chartContainer-3"></div> и т.д.

Данные для этих графиков приходится вставлять в heder, между тегами <head>. Достаточно объёмный скрипт для одного графика, а если их несколько, то header сильно захламляется. Интуитивно понимаю, что делаю неправильно, но не получается методом "тыка" сделать правильно. 
Гуглил много, но результата нет. К примеру, делаю так: скрипт сохраняю в файле .js c именем chartContainer , далее закидываю его в папку темы и вывожу в header указывая путь так: <script type="text/javascript" src="/js/chartContainer.js"></script>
Этот вариант не работает, график не выводится. Возможно этот способ не правильный. Друзья, подскажите, как правильно вывести графики из файла?

Вот скрипт графика, который приходится вставлять в header: 

<script type="text/javascript">
  window. onload = function () {
    var chart= new CanvasJS.Chart("chartContainer", {

      animationEnabled: true, 
      zoomEnabled:true,
      legend:{
        verticalAlign: "bottom",
        horizontalAlign: "center"
      },
      axisY:{
        includeZero: false,
        prefix: "$",
		  gridColor: "#DDD",
		  gridThickness: 1,
		  gridDashType: "dot",
		  tickThickness: 1,
		  interval: 250,
        maximum: 1900
      },
		 axisX:{      
            valueFormatString: "DD-MM-YY",
			   gridColor: "#DDD",
			   gridDashType: "dot",
			   tickThickness: 1,
			   gridThickness: 1
      },
		toolTip: {
        borderColor: "#337ba7",
		  backgroundColor: "#fbfbfb",
		  borderThickness: 2,
		  cornerRadius: 3,
		  fontStyle: "normal",
		  fontFamily: "tahoma"
      },
		data: [
      {
        type: "spline",
        markerSize: 8,
		  markerColor: "#337ba7",
		  markerBorderColor: "#FFF",
        markerBorderThickness: 1,
		  lineColor: "#337ba7",
        toolTipContent: "{x} <strong>${y} <strong>",
        dataPoints: [
        { x: new Date(2017,06,01), y: 215.00 },
        { x: new Date(2017,06,02), y: 409.00 },
        { x: new Date(2017,06,03), y: 526.00 },
        { x: new Date(2017,06,04), y: 624.00 },
	{ x: new Date(2017,06,05), y: 624.00 },
	{ x: new Date(2017,06,06), y: 871.00 },
        { x: new Date(2017,06,07), y: 901.00 },
        { x: new Date(2017,06,08), y: 964.00 },
        { x: new Date(2017,06,09), y: 914.00 },
        { x: new Date(2017,06,10), y: 1065.00 },
	{ x: new Date(2017,06,11), y: 1109.00 },
        { x: new Date(2017,06,12), y: 944.00 },
        { x: new Date(2017,06,13), y: 1186.00 },
        { x: new Date(2017,06,14), y: 1239.00 },
        { x: new Date(2017,06,18), y: 1382.00 },
	{ x: new Date(2017,06,19), y: 1419.00 },
        { x: new Date(2017,06,20), y: 1419.00 }
        ]
      }
      ]
    });
chart.render();
}
</script>
  • Вопрос задан
  • 282 просмотра
1 комментарий
Подписаться 2 Оценить 1 комментарий
Пригласить эксперта
Ответы на вопрос 2
Krasnodar_etc
@Krasnodar_etc
avito front
Грузить JS файл всё таки лучше в самом низу body . На эту тему много можно почитать в гугле
Перенесите код в низ body и, если ничего не изменится, поиграйте со строчкой src="/js/chartContainer.js" , скорее всего у вас просто путь не правильный.

На всякий случай - в самом файле js тэги script не ставятся
Ответ написан
Комментировать
Комментировать
@s-zhura Автор вопроса
С горем пополам подключил. Пришлось прописывать полный путь, включая https.
Теперь проблема другая не работают два графика одновременно. Подключал по отдельности два js файла, объединял скрипты в один файл, ни так ни так не работают два сразу, либо один, либо другой. Если объединяю скрипты в один файл, то почему то работает только нижний скрипт. Может кто поможет? Может нужно прописать какие-то условия, типа, если открывают одну страницу, то работает тот-то скрипт, если другую, то другой.
Вот два скрипта из файла (они идентичные, разница лишь в цвете графиков и значениях.):

window. onload = function () {
    var chart= new CanvasJS.Chart("chartContainer-2", {

      animationEnabled: true, 
      zoomEnabled:true,
      legend:{
        verticalAlign: "bottom",
        horizontalAlign: "center"
      },
      axisY:{
        includeZero: false,
        prefix: "$",
		  gridColor: "#DDD",
		  gridThickness: 1,
		  gridDashType: "dot",
		  tickThickness: 1,
		  interval: 250,
        maximum: 1900
      },
		 axisX:{      
            valueFormatString: "DD-MM-YY",
			   gridColor: "#DDD",
			   gridDashType: "dot",
			   tickThickness: 1,
			   gridThickness: 1
      },
		toolTip: {
        borderColor: "#61B057",
		  backgroundColor: "#fbfbfb",
		  borderThickness: 2,
		  cornerRadius: 3,
		  fontStyle: "normal",
		  fontFamily: "tahoma"
      },
		data: [
      {
        type: "spline",
        markerSize: 8,
		  markerColor: "#61B057",
		  markerBorderColor: "#FFF",
        markerBorderThickness: 1,
		  lineColor: "#61B057",
        toolTipContent: "{x} <strong>${y} <strong>",
        dataPoints: [
        { x: new Date(2017,06,01), y: 215.00 },
        { x: new Date(2017,06,02), y: 109.00 },
        { x: new Date(2017,06,03), y: 326.00 },
        { x: new Date(2017,06,04), y: 724.00 },
		  { x: new Date(2017,06,05), y: 624.00 },
		  { x: new Date(2017,06,06), y: 571.00 },
        { x: new Date(2017,06,07), y: 601.00 },
        { x: new Date(2017,06,08), y: 364.00 },
        { x: new Date(2017,06,09), y: 514.00 },
        { x: new Date(2017,06,10), y: 765.00 },
		  { x: new Date(2017,06,11), y: 909.00 },
        { x: new Date(2017,06,12), y: 944.00 },
        { x: new Date(2017,06,13), y: 1186.00 },
        { x: new Date(2017,06,14), y: 1179.00 },
        { x: new Date(2017,06,18), y: 1182.00 },
		  { x: new Date(2017,06,19), y: 989.00 },
        { x: new Date(2017,06,20), y: 1009.00 }
        ]
      }
      ]
    });
chart.render();
}  

window. onload = function () {
    var chart= new CanvasJS.Chart("chartContainer", {

      animationEnabled: true, 
      zoomEnabled:true,
      legend:{
        verticalAlign: "bottom",
        horizontalAlign: "center"
      },
      axisY:{
        includeZero: false,
        prefix: "$",
		  gridColor: "#DDD",
		  gridThickness: 1,
		  gridDashType: "dot",
		  tickThickness: 1,
		  interval: 250,
        maximum: 1900
      },
		 axisX:{      
            valueFormatString: "DD-MM-YY",
			   gridColor: "#DDD",
			   gridDashType: "dot",
			   tickThickness: 1,
			   gridThickness: 1
      },
		toolTip: {
        borderColor: "#337ba7",
		  backgroundColor: "#fbfbfb",
		  borderThickness: 2,
		  cornerRadius: 3,
		  fontStyle: "normal",
		  fontFamily: "tahoma"
      },
		data: [
      {
        type: "spline",
        markerSize: 8,
		  markerColor: "#337ba7",
		  markerBorderColor: "#FFF",
        markerBorderThickness: 1,
		  lineColor: "#337ba7",
        toolTipContent: "{x} <strong>${y} <strong>",
        dataPoints: [
        { x: new Date(2017,06,01), y: 215.00 },
        { x: new Date(2017,06,02), y: 409.00 },
        { x: new Date(2017,06,03), y: 526.00 },
        { x: new Date(2017,06,04), y: 624.00 },
		{ x: new Date(2017,06,05), y: 624.00 },
		{ x: new Date(2017,06,06), y: 871.00 },
        { x: new Date(2017,06,07), y: 901.00 },
        { x: new Date(2017,06,08), y: 964.00 },
        { x: new Date(2017,06,09), y: 914.00 },
        { x: new Date(2017,06,10), y: 1065.00 },
		{ x: new Date(2017,06,11), y: 1109.00 },
        { x: new Date(2017,06,12), y: 944.00 },
        { x: new Date(2017,06,13), y: 1186.00 },
        { x: new Date(2017,06,14), y: 1239.00 },
        { x: new Date(2017,06,18), y: 1382.00 },
		{ x: new Date(2017,06,19), y: 1419.00 },
        { x: new Date(2017,06,20), y: 1419.00 }
        ]
      }
      ]
    });
chart.render();
}
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Middle JavaScript Developer
AppsTrain.io
от 80 000 до 180 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Подключить сервер к сети
27 апр. 2024, в 02:39
1500 руб./за проект
Необходимо сверстать приложение согласно макету Figma используя React
26 апр. 2024, в 22:22
1500 руб./за проект
Написать модуль подключения матрицы Sony к ПЛИС (Verilog)
26 апр. 2024, в 21:30
15000 руб./за проект
Ещё заказы