Печать с CanvasJS в HTML из внешнего файла .JS - PullRequest
Новая
       22

Печать с CanvasJS в HTML из внешнего файла .JS

0 голосов
/ 14 марта 2019

У меня есть этот рабочий javascript / HTML-код, который отображает базовую линейную диаграмму с CanvasJS для некоторых базовых тестовых данных. Увидеть ниже. Я не хочу использовать диаграммы Google, потому что я пробовал, и диаграммы Google имеют утечки памяти, что делает диаграммы Google более или менее бесполезными для меня. 

<!DOCTYPE HTML>
<html>
<head>  
<script>
window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", 
{
animationEnabled: false,
backgroundColor: "#000000", 
title:{ text: "Price chart for crypto currency: ", fontSize: 22, fontFamily: "arial", fontWeight: "lighter", 
fontColor: "white", horizontalAlign: "left"},
axisY:{ includeZero: false, tickColor: "white", lineColor: "white", 
labelFontColor: "white", gridColor: "white", gridThickness: 0.5},
axisX:{ minimum: 1, maximum: 5.1, interval: 1, tickColor: "white", 
lineColor: "white", labelFontColor: "white", gridColor: "white", gridThickness: 0.5}, 
data: [{type: "line", dataPoints: 
[
{ x: 1, y: 450 },
{ x: 2, y: 414},
{ x: 3, y: 520},
{ x: 4, y: 460 },
{ x: 5, y: 450 }
]
}]

});

chart.render();

}
</script>
</head>
<body>
<div id="chartContainer" style="width: 80%; height: 450px;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>

Теперь я хочу извлечь существенную функцию кода построения и поместить ее в функцию javascript с именем PlotData () во внешний файл .js с именем plot.js, который находится в той же папке, что и файл HTML. Идея в конце состоит в том, чтобы вызвать такую ​​функцию из HTML с данными в качестве параметра функции, такого как PlotData ([{x: 1, y: 450}, {x: 2, y: 414} и т. Д.]). Это сделает HTML-код менее сложным и более общим, что означает, что я могу использовать его и для других данных.

Я попытался сделать это ниже. Я еще не поместил данные в параметр функции, потому что код не работает. Я должен решить одну проблему за один раз. Сначала получите работающий внешний код построения .js, а затем добавьте данные в качестве параметра функции построения графиков. 

function PlotData() 
{
var chart = new CanvasJS.Chart("chartContainer", 
{
animationEnabled: false,
backgroundColor: "#000000", 
title:{ text: "Price chart for crypto currency: ", fontSize: 22, fontFamily: "arial", fontWeight: "lighter", 
fontColor: "white", horizontalAlign: "left"},
axisY:{ includeZero: false, tickColor: "white", lineColor: "white", 
labelFontColor: "white", gridColor: "white", gridThickness: 0.5},
axisX:{ minimum: 1, maximum: 5.1, interval: 1, tickColor: "white", 
lineColor: "white", labelFontColor: "white", gridColor: "white", gridThickness: 0.5}, 
data: [{type: "line", dataPoints: 
[
{ x: 1, y: 450 },
{ x: 2, y: 414},
{ x: 3, y: 520},
{ x: 4, y: 460 },
{ x: 5, y: 450 }
]
}]

});

chart.render();

}
<!DOCTYPE HTML>
<html>
<head>  
<script type="text/javascript" src='plot.js'> </script> 
<script>
window.onload = PlotData();  
</script>
</head>

<body>
<div id="chartContainer" style="width: 80%; height: 450px;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>

Я знаю, как успешно добавить данные в параметр функции xxx (a) из внешнего файла .js с именем test3, расположенного в той же папке, что и HTML-код. 

function xxx(a)
{ 
alert("Value of a = " + a);  
}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src='test3.js'> </script>
</head>

<body>

<script>

xxx([1,2,3,4,5]); 

</script>

</body>
</html>

но из-за сложности написания кода я не могу эмулировать такой рабочий код.

1 Ответ

0 голосов
/ 14 марта 2019

Вы можете передать данные из HTML в функцию, определенную во внешнем файле JS, и отобразить диаграмму. Вот рабочий код: https://1drv.ms/u/s!Am6ZJqYg9Zmfgyj5JROGJigcwArr

...