Fatal编程技术网

Javascript 谷歌线图绘图问题

javascript jquery ajax

Javascript 谷歌线图绘图问题,javascript,jquery,ajax,linechart,Javascript,Jquery,Ajax,Linechart,在程序中计算的权重需要显示在图形中。我在代码中添加了以下示例： 显然，变量数据需要用权重替换，因此可以丢弃现有数据（第17行到第31行）。随附最新版本的代码 load（'current'，{'packages'：['line']}）；//加载可视化API和corechart包 google.charts.setOnLoadCallback（drawChart）；//将回调设置为在加载Google Visualization API时运行 //创建和填充数据表、实例化图表、传入数据并绘制数据的

在程序中计算的权重需要显示在图形中。我在代码中添加了以下示例： 显然，变量数据需要用权重替换，因此可以丢弃现有数据（第17行到第31行）。随附最新版本的代码 



load（'current'，{'packages'：['line']}）；//加载可视化API和corechart包
google.charts.setOnLoadCallback（drawChart）；//将回调设置为在加载Google Visualization API时运行
//创建和填充数据表、实例化图表、传入数据并绘制数据的回调。
函数绘图图（）{
//为相关符号创建数据表。
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”）；
绘制图表（数据，{高度：288，宽度：550，线宽：1}）；
}
k:
拉姆达：


updateValue（）；
document.getElementById（“k”）.addEventListener（“单击”，函数）（）{
updateValue（）；
});
document.getElementById（“lambda”）.addEventListener（“单击”，函数（）{
updateValue（）；
});
函数UpdateValues（）{
var权重=[]；
var k=document.getElementById（“k”）.value；
var lambda=document.getElementById（“lambda”）.value；
对于（var x=0.1；x<20；x++）{
重量推力（[x，k*Math.pow（x/lambda，k-1）*Math.exp（-Math.pow（x/lambda，k））/lambda]）；
document.getElementById（“message”）.innerHTML=weight；
}
}
我不知道为什么这些图表没有显示。。 提前感谢帮手

请检查

因此，主要问题是没有定义
容器


在你的代码中你写
document.getElementById（'chart#u weights'）
但是你应该写
document.getElementById（'chart#u weights'）
而不写
。
好吧，我照你说的做了，但是我的图表在每个值上都是一样的，它不会改变。@NATS如果你想动态更新图表，你应该把
drawChart（）
into
UpdateValues（）
我试图将
drawChart（）
放入
UpdateValues（）
但仍不起作用，我还尝试调用
drawChart（）
但仍无法更新图表dynamically@NATS你期待什么？还有，你查过了吗？它可能对您有用。我想要的是，每当我更改lambda/k的值时，图形应自动更改，即无需单击任何位置。

<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>