Как передать значения в js файл

177

19 октября 2018, 02:40

В js не силен, может быть вопрос и банальный, но...

Есть график на js, в него мне нужно передать мои данные.

Код моей страницы:

<canvas id="lineChart" height="150"></canvas> 
 
<script type="text/javascript"> 
  $(document).ready(function() { 
    ChartJs.init(); 
  }); 
</script> 
 
<script src="/assets/js/page/chart.demo.js"></script>

Код файла chart.demo.js

var handleRenderChart = function() { 
	Chart.defaults.global.defaultFontFamily = 'Arial'; 
	 
	var ctx = document.getElementById('lineChart'); 
	var lineChart = new Chart(ctx, { 
		type: 'line', 
		data: { 
			labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], 
			datasets: [{ 
				color: PRIMARY_COLOR, 
			  //other linies 
				label: 'Total Sales', 
				data: [12, 19, 4, 5, 2, 3] 
			}] 
		}, 
		options: { 
			scales: { 
				yAxes: [{ 
					ticks: { 
						beginAtZero:true 
					} 
				}] 
			} 
		} 
	}); 
 }; 
  
  
 /* Controller  */ 
var ChartJs = function () { 
	"use strict"; 
	 
	return { 
		//main function 
		init: function () { 
			handleRenderChart(); 
		} 
	}; 
}();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Я хочу, если это возможно, передавать как то тут ChartJs.init(); параметры labels, label, data

Или как иначе можно передать данные чтобы график отобразился с моими данными?

Буду благодарен за помощь.

Answer 1

Если я правильно вас понял, то вам нужно что-то такое:

<canvas id="lineChart" height="150"></canvas>
<script src="/assets/js/page/chart.demo.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
  var labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  var data = [12, 19, 4, 5, 2, 3]
  var label = 'Total Sales'
  ChartJs.init(labels, data, label);
  });
</script>

А в chart.demo.js примерно так:

var handleRenderChart = function(labels, data, label) {
    Chart.defaults.global.defaultFontFamily = 'Arial';
    var ctx = document.getElementById('lineChart');
    var lineChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                color: PRIMARY_COLOR,
              //other linies
                label: label,
                data: data
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }]
            }
        }
    });
 };

 /* Controller  */
var ChartJs = function () {
    "use strict";
    return {
        //main function
        init: function (labels, data, label) {
            handleRenderChart(labels, data, label);
        }
    };
}();