我有一个图表JS和它的顶部我有一个输入字段。当我想做的是让用户输入任何他想在输入字段和当他完成输入在这个输入字段。然后他的图表JS标题文本更改为他在输入字段中所写的内容。因此，在下面的图像中，此框包含“图表标题”是一个输入字段。我希望用户在那里输入，当它完成后，图表标题文本“这是一个图表”的变化是什么写在输入字段。

HTML

<input  type="text" style="border:1px solid white;background-color: #E9E8E6; color: black;  text-align: center;" placeholder = "Chart Title">    <!--The input field that takes user input and when its done I want to change the chart JS title text which have the text "This is a chart" to be changed to the input field text -->
                                    <div class="card-body">
                                      <canvas id="barChart_3"></canvas>

JS

var dzSparkLine = function(){
    let draw = Chart.controllers.line.__super__.draw; //draw shadow
    
    var screenWidth = $(window).width();
    

    
    var barChart3 = function(){
        //stalked bar chart
        if(jQuery('#barChart_3').length > 0 ){
            const barChart_3 = document.getElementById("barChart_3").getContext('2d');
            //generate gradient
            const barChart_3gradientStroke = barChart_3.createLinearGradient(50, 100, 50, 50);
            barChart_3gradientStroke.addColorStop(0, "rgba(19, 180, 151, 1)");
            barChart_3gradientStroke.addColorStop(1, "rgba(19, 180, 151, 0.5)");

            const barChart_3gradientStroke2 = barChart_3.createLinearGradient(50, 100, 50, 50);
            barChart_3gradientStroke2.addColorStop(0, "rgba(43, 193, 85, 1)");
            barChart_3gradientStroke2.addColorStop(1, "rgba(43, 193, 85, 1)");

            const barChart_3gradientStroke3 = barChart_3.createLinearGradient(50, 100, 50, 50);
            barChart_3gradientStroke3.addColorStop(0, "rgba(208, 116, 7, 1)");
            barChart_3gradientStroke3.addColorStop(1, "rgba(208, 116, 7, 1)");
            
            barChart_3.height = 100;
          
            let barChartData = {
                defaultFontFamily: 'Poppins',
                labels: [ 2023,2024,2025,2026,2027],
                datasets: [100,200,500,700,800]     };

            new Chart(barChart_3, {
                type: 'bar',
                data: barChartData,
                options: {
                    legend: {
                        display: true,
                        position: 'right'
                    }, 
                    title: {
                        display: true,text: 'This is a chart'        // the text I want to change
                    },
                    tooltips: {
                        mode: 'index',
                        intersect: false
                    },
                    responsive: true,
                        scales: {
        yAxes: [{
          scaleLabel: {
            display: true,
            labelString: ''
          }
        }],
        xAxes: [{
          scaleLabel: {
            display: true,
            labelString: 'Years'
          }
        }],
      }
    
                }
            });