如何改变javascript值从文本框
how to change javascript value from textboxes
我有两页1)数据2)饼状图。
在数据页我有5个文本框和一个按钮。
我想改变以下值从文本框值后点击按钮
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
怎么做??
下面是我的代码:<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
您可以重用drawChart()
代码并在click
或onsubmit
等事件中使用它(可能在加载时也可以动态加载)
** 注意,您可以使用Ajax
或仅从html inputs
中获取一些值来重新绘制饼状图
下面我已经演示了如何实现它,你需要根据你的需要修改它。
google.load("visualization", "1", {
packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
$(function() {
$('#ctc').on('click', function() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 20],
['Eat', 12],
['Commute', 12],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities - Now changed on click !!'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<h2 id='ctc'>Click me</h2>
<div id="piechart" style="width: 900px; height: 500px;"></div>
相关文章:
- Servlet对浏览器上显示的纯文本Javascript的响应
- 删除选定文本javascript前后的特定文本
- 在两个括号内插入文本 - Javascript
- 获取文本javascript+iframe
- 语音到文本JavaScript,HTML5
- 使用谷歌融合表格地图的网页文本/JavaScript未显示
- 在显示和隐藏文本(javascript)之间切换
- 使用哈希标记保存文本(Javascript - PHP - MySQL)
- 停止闪烁文本 JavaScript
- 如何计算一个字母在文本javascript中出现的次数
- 有效地突出显示文档中的文本 (JavaScript)
- 将变量传递给文本 javascript
- 如何暂停文本 Javascript / var textarray
- 从段落中搜索文本 - Javascript
- 如何使用 id 输入类型=“文本”JavaScript 中的值设置自动 2 个十进制数
- 替换文本 JavaScript .append()
- 语音到文本JavaScript识别医学词典
- 在提取的文本 JavaScript 中搜索关键字
- 如何在HTML中将文本javascript显示为正常正文的一部分
- 单击图像时更改段落文本(Javascript)