使用jQuery和JavaScript进行用户输入_Javascript_Jquery_Html_Google Pie Chart

使用jQuery和JavaScript进行用户输入

javascript jquery html

使用jQuery和JavaScript进行用户输入,javascript,jquery,html,google-pie-chart,Javascript,Jquery,Html,Google Pie Chart,我有以下使用谷歌饼图的代码，但饼图中预先填充了数据，我希望通过一些基本的HTML文本表单获得用户输入，但我不确定如何更改默认活动。” 由用户输入的内容，而不是如图所示的预设内容 <html> <head>  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" inte

我有以下使用谷歌饼图的代码，但饼图中预先填充了数据，我希望通过一些基本的HTML文本表单获得用户输入，但我不确定如何更改默认活动。”

由用户输入的内容，而不是如图所示的预设内容

<html>
<head>

<!--bootstrap -->   
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- jQuery (CDN)-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- google api of the pi chart -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<!-- Angular -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<script type="text/javascript">
// Load google charts

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
// Draw the chart and set the chart values
function drawChart() {
  var data = google.visualization.arrayToDataTable([
  ['Task', 'Hours per Day'],
  ['Work', 8],
  ['Friends', 2],
  ['Eat', 2],
  ['TV', 3],
  ['Gym', 2],
  ['Sleep', 7]
]);

  // Optional; add a title and set the width and height of the chart
  var options = {'title':'Time Spent', 'width':700, 'height':500};

  // Display the chart inside the <div> element with id="piechart"
  var chart = new google.visualization.PieChart(document.getElementById('piechart'));
  chart.draw(data, options);
}


//hide and show the pie chart
$(document).ready(function(){
    $("#hide").click(function(){
        $("#piechart").hide();
    });
    $("#show").click(function(){
        $("#piechart").show();
    });
});


</script>
</head>

<body>
<div class ="container-fluid">   

<button id = "hide">hide the pie chart</button>
<button id = "show">show the pie chart</button>
<div id="piechart"></div>

</container>

</body>
<html>


//加载谷歌图表
load（'current'，{'packages'：['corechart']}）；
google.charts.setOnLoadCallback（drawChart）；
//绘制图表并设置图表值
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
[“任务”，“每天工作小时数”]，
[‘工作’，8]，
['Friends'，2]，
[Eat'，2]，
[TV'，3]，
[Gym'，2]，
[Sleep'，7]
]);
//可选；添加标题并设置图表的宽度和高度
var options={'title'：'Time-speed'，'width'：700，'height'：500}；
//使用id=“piechart”在元素内显示图表
var chart=new google.visualization.PieChart（document.getElementById（'PieChart'）；
图表绘制（数据、选项）；
}
//隐藏并显示饼图
$（文档）.ready（函数（）{
$（“#隐藏”）。单击（函数（）{
$（“#piechart”）.hide（）；
});
$（“#显示”）。单击（函数（）{
$（“#piechart”）.show（）；
});
});
隐藏饼图
显示饼图

但是，我不确定如何将默认活动更改为是用户输入的内容，而不是如图所示的预设内容

<html>
<head>

<!--bootstrap -->   
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- jQuery (CDN)-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- google api of the pi chart -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<!-- Angular -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<script type="text/javascript">
// Load google charts

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
// Draw the chart and set the chart values
function drawChart() {
  var data = google.visualization.arrayToDataTable([
  ['Task', 'Hours per Day'],
  ['Work', 8],
  ['Friends', 2],
  ['Eat', 2],
  ['TV', 3],
  ['Gym', 2],
  ['Sleep', 7]
]);

  // Optional; add a title and set the width and height of the chart
  var options = {'title':'Time Spent', 'width':700, 'height':500};

  // Display the chart inside the <div> element with id="piechart"
  var chart = new google.visualization.PieChart(document.getElementById('piechart'));
  chart.draw(data, options);
}


//hide and show the pie chart
$(document).ready(function(){
    $("#hide").click(function(){
        $("#piechart").hide();
    });
    $("#show").click(function(){
        $("#piechart").show();
    });
});


</script>
</head>

<body>
<div class ="container-fluid">   

<button id = "hide">hide the pie chart</button>
<button id = "show">show the pie chart</button>
<div id="piechart"></div>

</container>

</body>
<html>

您的数据是一个数组数组。请像这样正常访问它，然后重新定义值

var数据=([
['Task'，'Hours per Day']，//数组键0
//让我们把工作变成跑步吧
['Work'，8]，//数组键1
['Friends'，2]，//数组键2
['Eat'，2]，//数组键3
//让我们把电视变成游戏吧
['TV'，3]，//数组键4
['Gym'，2]，//数组键5
['Sleep'，7]//数组键6
]);
//让我们假设这些是用户输入值。
var userInputOne=“正在运行”；
var userinputwo=“游戏”；
数据[1][0]=用户输入按钮；
数据[4][0]=用户输入WO；
console.log（数据）；

您可以创建自己的数组并用用户输入填充它，例如：

<html>
<head>

<!--bootstrap -->   
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<!-- jQuery (CDN) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- google api of the pi chart -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<!-- Angular -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<script type="text/javascript">
// Load google charts

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

// Fill this with user input..
var chartObj = [
    ['Task', 'Hours per Day'],
    ['Work', 8],
    ['Friends', 2],
    ['Eat', 2],
    ['TV', 3],
    ['Gym', 2],
    ['Sleep', 7]
];


// Draw the chart and set the chart values
function drawChart() {

// Pass the chartObj to the function
var data = google.visualization.arrayToDataTable(this.chartObj);

  // Optional; add a title and set the width and height of the chart
  var options = {'title':'Time Spent', 'width':700, 'height':500};

  // Display the chart inside the <div> element with id="piechart"
  var chart = new google.visualization.PieChart(document.getElementById('piechart'));
  chart.draw(data, options);
}


//hide and show the pie chart
$(document).ready(function(){
    $("#hide").click(function(){
        $("#piechart").hide();
    });
    $("#show").click(function(){
        $("#piechart").show();
    });
});


</script>
</head>

<body>
<div class ="container-fluid">   

<button id = "hide">hide the pie chart</button>
<button id = "show">show the pie chart</button>
<div id="piechart"></div>

</container>

</body>
<html>


//加载谷歌图表
load（'current'，{'packages'：['corechart']}）；
google.charts.setOnLoadCallback（drawChart）；
//用用户输入填写此字段。。
var chartObj=[
[“任务”，“每天工作小时数”]，
[‘工作’，8]，
['Friends'，2]，
[Eat'，2]，
[TV'，3]，
[Gym'，2]，
[Sleep'，7]
];
//绘制图表并设置图表值
函数绘图图（）{
//将chartObj传递给函数
var data=google.visualization.arrayToDataTable（this.chartObj）；
//可选；添加标题并设置图表的宽度和高度
var options={'title'：'Time-speed'，'width'：700，'height'：500}；
//使用id=“piechart”在元素内显示图表
var chart=new google.visualization.PieChart（document.getElementById（'PieChart'）；
图表绘制（数据、选项）；
}
//隐藏并显示饼图
$（文档）.ready（函数（）{
$（“#隐藏”）。单击（函数（）{
$（“#piechart”）.hide（）；
});
$（“#显示”）。单击（函数（）{
$（“#piechart”）.show（）；
});
});
隐藏饼图
显示饼图

谢谢你的帮助，我一定会按照你的建议做一点工作，看看我能得到什么！这似乎有助于澄清一点。谢谢你，我会看看我能得到什么！很高兴它有帮助-如果这解决了你的问题，就接受答案。