Я хотел бы объединить HTML, CSS и JS в один HTML-скрипт для кода, уже созданного в «Кривая Белла, используя Google Charts API»
https://codepen.io/josdea/pen/JKXpJb/
Это должно быть так же просто, как поместить CSS-стиль и JS-скрипт в голову, верно? По какой-то причине я не могу заставить его работать. Любая помощь будет принята с благодарностью. Вот мой код:
<html>
<head>
<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
var data;
var options;
let chart;
var stndDev = 1;
var mean = 0;
let xMin = -3;
let xMax = 3.1;
let xLeft = -2;
let xRight = 1.25;
google.charts.load("current", { packages: ["corechart"] });
google.charts.setOnLoadCallback(prepareChart);
function prepareChart() {
data = new google.visualization.DataTable();
setChartOptions();
addColumns();
addData();
drawChart();
}
function setChartOptions() {
options = { legend: "none" };
options.hAxis = {};
options.hAxis.minorGridlines = {};
options.hAxis.minorGridlines.count = 5;
return options;
}
function addColumns() {
data.addColumn("number", "X Value");
data.addColumn("number", "Y Value");
data.addColumn({ type: "boolean", role: "scope" });
data.addColumn({ type: "string", role: "style" });
}
function addData() {
data.addRows(createArray(xMin, xMax, xLeft, xRight, mean, stndDev));
}
function createArray(xMin, xMax, xLeft, xRight, mean, stndDev) {
let chartData = new Array([]);
let index = 0;
for (var i = xMin; i <= xMax; i += 0.1) {
chartData[index] = new Array(4);
chartData[index][0] = i;
chartData[index][1] = jStat.normal.pdf(i, mean, stndDev);
if (i < xLeft || i > xRight) {
chartData[index][2] = false;
}
chartData[index][3] =
"opacity: 1; + color: #8064A2; + stroke-color: black; ";
index++;
}
return chartData;
}
function drawChart() {
chart = new google.visualization.AreaChart(
document.getElementById("chart_div")
);
chart.draw(data, options);
}
</script>
</head>
<body>
<style>
#chart_div{
width: 1200px;
height: 600px;
margin: 5px;
}
</style>
<h1>Bell Curve with Google Charts API</h1>
<div id="chart_div"></div>
</body>
</html>
Код в настоящее время приводит к ошибке «Таблица данных не определена».