Я ищу, чтобы настроить интерактивный график (скрипка здесь: https://jsfiddle.net/martinnguyen/caygv06L/10/).. Я объединил Bootstrap и ChartJS, чтобы дать мне представление о графике, однако не слишком уверен, что нужно сделать, чтобы кнопкиможет предоставить обновленный график.
Я новичок и ищу способ сделать это плавно.
<!doctype html>
<html lang = "en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<form class="form-inline">
<div class="col-auto">
<label for="quoteStart" class="mr-sm-2">Quote Start</label>
<input type="number" class="form-control" id="quoteStart" placeholder="0%">
</div>
<button type="button" class="btn btn-info btn-sm">Submit</button>
<div class="col-auto">
<label for="quoteCompletionRate" class="mr-sm-2">Quote Completion Rate</label>
<input type="number" class="form-control" id="quoteCompletionRate" placeholder="48.4%">
</div>
<button type="button" class="btn btn-info btn-sm">Submit</button>
<script>
var url = new URL(window.location.href)
var quoteStartVal = url.searchParams.get(id="quoteStart") || quoteStartVal
console.log({ quoteStartVal })
document.getElementById('quoteStart').value = quoteStartVal
</script>
<canvas id="myChart"></canvas>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
const chart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['July', 'August', 'September', 'October', 'November', 'December', 'January', 'February', 'March', 'April', 'May', 'June'],
datasets: [{
label: "Overall Retained FY19 Actuals",
backgroundColor: 'rgba(126, 42, 126, 0.2)',
borderColor: 'rgb(126, 42, 126)',
fill: false,
borderWidth: 1,
hoverBorderColor: 'rgba(184, 3, 166, 0.9)',
hoverBorderWidth: 3,
hoverBackgroundColor: 'rgba(205, 55, 190, 0.6)',
data: [1635063, 2959406, 4839690, 6448717, 7692471, 9372588, 11066524],
}, {
label: "SPLY",
backgroundColor: 'rgba(229, 229, 229, 0.9)',
borderColor: 'rgba(93, 191, 63, 0.9)',
fill: false,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'green',
pointHoverBorderWidth: 2,
data: [962615, 1969827, 2918907, 4028890, 4931737, 5990783, 7182515, 8546794, 9791499, 11184470, 12537000, 13987457, 13987457],
borderDash: [10, 5],
type: 'line'
}, {
label: "FY19 Budget",
backgroundColor: 'rgba(255, 255, 255, 0.9)',
borderColor: 'rgba(191, 63, 63, 0.9)',
fill: false,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'red',
pointHoverBorderWidth: 2,
data: [1596798, 3065773, 4593808, 6206344, 7562983, 9075517, 10632793, 12242169, 13764737, 15152489, 16615769, 18178526],
borderDash: [10, 5],
type: 'line'
}, {
label: "Predicted Model",
backgroundColor: 'rgba(229, 229, 229, 0.9)',
borderColor: 'purple',
fill: false,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'green',
pointHoverBorderWidth: 2,
data: [ , , , , , , , 8546794*quoteStartVal, 9791499, 11184470, 12537000, 13987457, 13987457],
borderDash: [10, 5],
type: 'line'
}],
},
// Configuration options go here
options: {
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'GWP $',
fontSize: 20,
fontFamily: 'Helvetica',
fontStyle: 'bold',
},
ticks: {
fontSize: 14,
fontFamily: 'Helvetica',
beginAtZero: true
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Month',
fontSize: 20,
fontFamily: 'Helvetica',
fontStyle: 'bold',
segmentShowStroke: false,
animateScale: true,
},
ticks: {
fontSize: 14,
fontFamily: 'Helvetica',
}
}]
},
responsive: true,
legend:{
position: 'top',
fullWidth: true,
labels: {
fontFamily: 'Helvetica',
fontStyle: 'italic',
fontSize: 12,
}
},
title: {
display: true,
text: ['Overall GWP - a view'],
fontSize: [30],
fontFamily: "Arial",
fontStyle: 'bold',
},
tooltips: {
enabled: true,
mode: 'nearest',
callbacks: {
label: function(tooltipItems,data){
return 'Overall GWP:' + ' $' + tooltipItems.yLabel;
}
}
}
}
});
</script>
В JSFiddle выше я быЯ хотел бы найти способ, чтобы, если бы я набрал текст в любом из полей выше, я мог создать дополнительную линию на графике, которая представляла бы будущую модель (например, Начало цитаты увеличилось на 10%, поэтому всплыла новая синяя линия иотразить, что на 10% больше).