#javascript #html #canvasjs
#javascript #HTML #canvasjs
Вопрос:
У меня есть этот рабочий javascript / HTML-код, который строит базовую линейную диаграмму с помощью CanvasJS для некоторых базовых тестовых данных. Смотрите ниже. Я не хочу использовать Google charts, потому что я пробовал это, и у Google charts есть утечки памяти, что делает Google charts более или менее бесполезным для меня.
<!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:
Вы можете передавать данные из HTML в функцию, определенную во внешнем файле JS, и отображать диаграмму. Вот рабочий код:https://1drv.ms/u/s !Am6ZJqYg9Zmfgyj5JROGJigcwArr
Комментарии:
1. Спасибо, что нашли время помочь мне 🙂 Ваш очень хороший ответ с рабочим кодом сэкономил мне много времени, так что спасибо вам за это.