如何在用户完成输入框内容输入后修改Chart.js图表的标题文本

实现步骤 #

• 给输入框添加唯一id，方便DOM选取
• 将Chart实例存储到可访问的变量，方便后续修改配置
• 给输入框绑定输入事件，实时同步输入内容到图表标题配置，再调用update()方法刷新图表

修改后的HTML代码

<!-- 新增id方便选取元素 -->
<input id="chartTitleInput" type="text" style="border:1px solid white;background-color: #E9E8E6; color: black;  text-align: center;" placeholder = "Chart Title">    
<div class="card-body">
  <canvas id="barChart_3"></canvas>
</div>

修改后的JS代码

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

    
    var barChart3 = function(){
        //堆叠柱状图
        if(jQuery('#barChart_3').length > 0 ){
            const barChart_3 = document.getElementById("barChart_3").getContext('2d');
            //生成渐变
            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]     };

            // 将图表实例存入变量，方便后续操作
            const barChart3Instance = new Chart(barChart_3, {
                type: 'bar',
                data: barChartData,
                options: {
                    legend: {
                        display: true,
                        position: 'right'
                    }, 
                    title: {
                        display: true,text: 'This is a chart'
                    },
                    tooltips: {
                        mode: 'index',
                        intersect: false
                    },
                    responsive: true,
                        scales: {
        yAxes: [{
          scaleLabel: {
            display: true,
            labelString: ''
          }
        }],
        xAxes: [{
          scaleLabel: {
            display: true,
            labelString: 'Years'
          }
        }],
      }
    
                }
            });

            // 绑定输入事件，同步更新标题
            document.getElementById('chartTitleInput').addEventListener('input', function(e) {
                // 输入为空时保留默认标题
                barChart3Instance.options.title.text = e.target.value || 'This is a chart';
                // 刷新图表
                barChart3Instance.update();
            })
        }
    }
}

如果需要输入完成（失焦/按下回车）才更新标题，把input事件换成change或者绑定keyup事件判断回车触发即可。

内容的提问来源于stack exchange，提问作者Hassan