Google 折线图绘制问题
Google line charts drawing issue
程序中计算出的权重需要用图表显示出来。我在代码中添加了一个取自此处的示例：https://developers.google.com/chart/interactive/docs/gallery/linechart#creating-material-line-charts
显然可变数据需要用权重替换，所以现有数据（第17到31行）可以丢弃。附上最新版代码
</p>
<pre><code><html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', { 'packages': ['line'] }); // load the visualisation API and corechart package
google.charts.setOnLoadCallback(drawChart); // set a callback to run when the Google Visualization API is loaded
// Callback that creates and populates a data table, instantiates the chart, passes in the data and draws it.
function drawChart() {
// Create the data table for the symbol in question.
var data = new google.visualization.DataTable();
data.addColumn('number', 'k');
data.addColumn('number', 'lambda');
data.addRows([
[-0.050, 0.00952],
[-0.040, 0.00952],
[-0.030, 0.01904],
[-0.025, 0.03809],
[-0.020, 0.02857],
[-0.015, 0.04761],
[-0.010, 0.02857],
[-0.005, 0.18095],
[0.000, 0.21904],
[0.005, 0.16190],
[0.010, 0.12380],
[0.015, 0.05714],
[0.020, 0.03809],
[0.030, 0.02857],
[0.080, 0.00952]
]);
var chart = new google.charts.Line(document.getElementById('#chart_weights'));
chart.draw(data, { height: 288, width: 550, lineWidth: 1 });
}
</script>
</head>
<body>
<table>
<tr><td>k: </td><td><input id="k" type="number" value="2.2" min="0" max="10" step="0.1" /></td></tr>
<tr><td>lambda: </td><td><input id="lambda" type="number" value="7.6" min="0" max="10" step="0.1" /></td></tr>
</table>
<p id="message"> </p>
<script type="text/javascript">
UpdateValues();
document.getElementById("k").addEventListener("click", function() {
UpdateValues();
});
document.getElementById("lambda").addEventListener("click", function() {
UpdateValues();
});
function UpdateValues() {
var weight = [];
var k = document.getElementById("k").value;
var lambda = document.getElementById("lambda").value;
for (var x = 0.1; x < 20; x++) {
weight.push([x, k * Math.pow(x/lambda, k-1) * Math.exp(-Math.pow(x/lambda, k)) / lambda]);
document.getElementById("message").innerHTML = weight;
}
}
</script>
<div id="chart_weights"></div>
</body>
</html>
我不知道为什么没有显示这些图表。
在此先感谢您的帮助
请检查this example
所以，主要问题是Container is not defined。
在你的代码中你写了 document.getElementById('#chart_weights') 但你应该写 document.getElementById('chart_weights') 而没有 #.
程序中计算出的权重需要用图表显示出来。我在代码中添加了一个取自此处的示例：https://developers.google.com/chart/interactive/docs/gallery/linechart#creating-material-line-charts
显然可变数据需要用权重替换，所以现有数据（第17到31行）可以丢弃。附上最新版代码
</p>
<pre><code><html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', { 'packages': ['line'] }); // load the visualisation API and corechart package
google.charts.setOnLoadCallback(drawChart); // set a callback to run when the Google Visualization API is loaded
// Callback that creates and populates a data table, instantiates the chart, passes in the data and draws it.
function drawChart() {
// Create the data table for the symbol in question.
var data = new google.visualization.DataTable();
data.addColumn('number', 'k');
data.addColumn('number', 'lambda');
data.addRows([
[-0.050, 0.00952],
[-0.040, 0.00952],
[-0.030, 0.01904],
[-0.025, 0.03809],
[-0.020, 0.02857],
[-0.015, 0.04761],
[-0.010, 0.02857],
[-0.005, 0.18095],
[0.000, 0.21904],
[0.005, 0.16190],
[0.010, 0.12380],
[0.015, 0.05714],
[0.020, 0.03809],
[0.030, 0.02857],
[0.080, 0.00952]
]);
var chart = new google.charts.Line(document.getElementById('#chart_weights'));
chart.draw(data, { height: 288, width: 550, lineWidth: 1 });
}
</script>
</head>
<body>
<table>
<tr><td>k: </td><td><input id="k" type="number" value="2.2" min="0" max="10" step="0.1" /></td></tr>
<tr><td>lambda: </td><td><input id="lambda" type="number" value="7.6" min="0" max="10" step="0.1" /></td></tr>
</table>
<p id="message"> </p>
<script type="text/javascript">
UpdateValues();
document.getElementById("k").addEventListener("click", function() {
UpdateValues();
});
document.getElementById("lambda").addEventListener("click", function() {
UpdateValues();
});
function UpdateValues() {
var weight = [];
var k = document.getElementById("k").value;
var lambda = document.getElementById("lambda").value;
for (var x = 0.1; x < 20; x++) {
weight.push([x, k * Math.pow(x/lambda, k-1) * Math.exp(-Math.pow(x/lambda, k)) / lambda]);
document.getElementById("message").innerHTML = weight;
}
}
</script>
<div id="chart_weights"></div>
</body>
</html>
我不知道为什么没有显示这些图表。 在此先感谢您的帮助
请检查this example
所以，主要问题是Container is not defined。
在你的代码中你写了 document.getElementById('#chart_weights') 但你应该写 document.getElementById('chart_weights') 而没有 #.