我正在创建一个有关telangana政党的图表，因为我有3个政党TRS，TDP，CONGRESS，我的疑问是，当我单击“更新”按钮时，数据值应该更新，并且在添加3个数据值时应该保持不变。当我单击“更新”按钮时，该参数每次都会更改，但是数据值必须有所不同。
<!doctype html>
<html lang="eng">
<head>
<meta charset ="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bar-Graphs3</title>
<link href="style.css" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
</head>
<body class="bg-secondary">
<div class="container d-flex">
<div class="col-md-6 offset-md-3 mt-5">
<div class="card">
<div class="card-body">
<h3>Telangana Election Parties</h3>
</div>
<div class="card-body">
<canvas id="myChart"></canvas>
</div>
<div class="w-2 text-center pb-3">
<button class="btn btn-outline-warning" onclick="dataadd()"> Add</button>
<button class="btn btn-outline-warning" onclick="updateData()">Update</button>
<button class="btn btn-outline-warning" onclick="updateRemoveData()">Remove</button>
</div>
</div>
</div>
<!-- <div class="col-md-6 mt-5">
<div class="card">
<div class="card-body">
<h3>Telangana Election Parties</h3>
</div>
<div class="card-body">
<canvas id="myChart1"></canvas>
</div>
<div class="w-2 text-center pb-3">
<button class="btn btn-outline-warning" onclick="dataremove()"> Remove</button>
</div>
</div>
</div> -->
</div>
<script>
var olddata =[120, 10, 9];
var olddata1 = [119, 30, 19];
var newdata = [Math.floor(Math.random() * 119), Math.floor(Math.random() * 119), Math.floor(Math.random() * 119)];
var newlabeles = ['BJP', 'JAVASENA', 'YSR'];
var datavalue = Math.floor(Math.random() * 119);
console.log(datavalue);
var ctx = document.getElementById('myChart').getContext('2d');
var populationChart = new Chart(ctx, {
type: 'bar',
data:{
labels:['TRS', 'CONGRESS', 'TDP'],
datasets:[{
label: 'voting report',
data: olddata,
backgroundColor:[
'rgba(54, 162, 235, 0.2)',
'rgba(53, 160, 200, 0.2)',
'rgba(40, 100, 180, 0.2)'
],
borderColor:[
'rgba(54, 162, 235, 1)',
'rgba(53, 160, 200, 1)',
'rgba(40, 100, 180, 1)'
],
borderWidth:1,
fontSize:20
},
{
label: 'Results',
type: 'line',
data:olddata1,
backgroundColor:[
'rgba(153, 102, 255, 0.2)'
],
borderColor:[
'rgba(153, 102, 255, 1)'
],
borderWidth:1,
fontSize:20
}]
},
options:{
scales:{
yAxes:[{
ticks:{
beginAtZero:true
}
}]
}
}
});
function updateData(){
populationChart.data.datasets[0].data = [Math.floor(Math.random() * 119), Math.floor(Math.random() * 119), Math.floor(Math.random() * 119)];
populationChart.data.datasets[1].data = [Math.floor(Math.random() * 119), Math.floor(Math.random() * 119), Math.floor(Math.random() * 119)];
populationChart.update();
}
function dataadd(){
populationChart.data.labels = newlabeles;
populationChart.data.datasets[0].data.push([datavalue]);
/* populationChart.data.datasets[0].data = newData;
populationChart.data.datasets[1].data = newData1;*/
populationChart.update();
}
function updateRemoveData(){
populationChart.data.labels.pop(newlabeles);
populationChart.update();
}
</script>
<!-- <script>
var oldData =[200, 190, 150];
var oldData1 = [280, 150, 100];
var newData = [200, 190, 150, 90];
var newData1 = [280, 150, 100, 90];
var ctx = document.getElementById('myChart1').getContext('2d');
var populationChart1 = new Chart(ctx, {
type: 'bar',
data:{
labels:['TRS', 'CONGRESS', 'TDP' ],
datasets:[{
label: 'voting report',
data: oldData,
backgroundColor:[
'rgba(54, 162, 235, 0.2)',
'rgba(53, 160, 200, 0.2)',
'rgba(40, 100, 180, 0.2)'
],
borderColor:[
'rgba(54, 162, 235, 1)',
'rgba(53, 160, 200, 1)',
'rgba(40, 100, 180, 1)'
],
borderWidth:1,
fontSize:20
},
{
label: 'Results',
type: 'line',
data:oldData1,
backgroundColor:[
'rgba(153, 102, 255, 0.2)'
],
borderColor:[
'rgba(153, 102, 255, 1)'
],
borderWidth:1,
fontSize:20
}]
},
options:{
scales:{
yAxes:[{
ticks:{
beginAtZero:true
}
}]
}
}
});
function dataremove(){
populationChart1.data.labels.pop('BJP');
populationChart1.data.datasets[0].data = newData;
populationChart1.data.datasets[1].data = newData1;
populationChart1.update();
}
</script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>