如何通过select元素动态设置CanvasJS图表title与图表类型

直接修改原有代码即可，全程用原生JavaScript实现，不需要额外依赖，逻辑适合初学者理解。

核心原理 #

CanvasJS初始化返回的chart实例，所有配置都存在chart.options对象下，直接修改这个对象里的对应属性，再调用chart.render()方法就能让配置生效，不需要重新创建图表实例。

具体修改点 #

• 先补全下拉选择框的选项：原代码默认图表类型是折线图（line），但下拉框里没有对应选项，先补上，保证初始状态和选项匹配。
• 给下拉框绑定change事件，选中项变化时同步更新图表类型和标题，立即重渲染。
• 调整添加数据点的渲染逻辑，每次加数据前先读取当前下拉框的选中值，避免加完数据图表变回初始默认类型。

修改后完整可运行代码 #

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
    window.onload = function () {
        var dps = []; //dataPoints. 

        var chart = new CanvasJS.Chart("chartContainer", {
            title: {
                text: "Line Chart - Accepting DataPoints from User Input"
            },
            data: [{
                type: "line",
                dataPoints: dps
            }]
        });
        chart.render(); // 初始渲染

        // 下拉框元素引用
        var typeSelect = document.getElementById("select1");

        // 监听下拉选择变化
        typeSelect.addEventListener("change", function(){
            var selectedType = this.value;
            var selectedTypeName = this.options[this.selectedIndex].text;
            // 更新图表类型
            chart.options.data[0].type = selectedType;
            // 更新标题
            chart.options.title.text = selectedTypeName + " Chart - Accepting DataPoints from User Input";
            // 重渲染生效
            chart.render();
        })

        function addDataPointsAndRender() {
            xValue = Number(document.getElementById("xValue").value);
            yValue = Number(document.getElementById("yValue").value);
            // 加数据前同步当前选中的图表类型，避免配置还原
            var selectedType = typeSelect.value;
            var selectedTypeName = typeSelect.options[typeSelect.selectedIndex].text;
            chart.options.data[0].type = selectedType;
            chart.options.title.text = selectedTypeName + " Chart - Accepting DataPoints from User Input";
            
            dps.push({
                x: xValue,
                y: yValue
            });
            chart.render();
        }

        var renderButton = document.getElementById("renderButton");
        renderButton.addEventListener("click", addDataPointsAndRender);
    }
  </script>
  <script type="text/javascript" 
  src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
X Value:
<input id="xValue" type="number" step="any" placeholder="Enter X-Value"> Y Value:
<input id="yValue" type="number" step="any" placeholder="Enter Y-Value">

<select id="select1">
    <!-- 补全默认的line选项，设置为默认选中 -->
    <option value="line" selected>Line</option>
    <option value="bar">Bar</option>
    <option value="pie">Pie</option>
    <option value="column">Column</option>
</select>

<button id="renderButton">Add DataPoint & Render</button>
<div id="chartContainer" style="height: 270px; width: 100%;">
</div>
</body>
</html>

效果说明 #

• 切换下拉选项时，图表会立刻切换成对应类型，同时标题会同步更新为当前图表类型对应的名称
• 输入X、Y值点击添加数据点时，会保持当前选中的图表类型，不会跳回默认折线图
• 所有逻辑都是原生JS实现，没有额外封装，可以直接对照注释查看每一步的作用。

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