以下是我的评论：

1-隐藏之前显示的图表

要做到这一点，您需要做两件事：查找当前显示的图表，并隐藏它。
让我们先添加两个类：hidden-chart和active-chart及其CSS：

.hidden-chart { display: none !important; }
.active-chart { display: inherit !important; }

并相应地编辑HTML：

<canvas id="lineChart" class="hidden-chart"></canvas>
<canvas id="barChart" class="hidden-chart"></canvas>
<canvas id="pieChart" class="hidden-chart"></canvas>
<canvas id="radarChart" class="hidden-chart"></canvas>

好的，现在你可以有两种图表：具有hidden-chart类的隐藏图表和具有active-chart类的当前显示的图表。
为了实现1），您现在必须将以下代码添加到您的函数：

function myFunction() {
    const currentChart = document.querySelector("#display .active-chart");
    if (currentChart) {
        currentChart.classList.remove("active-chart"); // Remove the active-chart class
        currentChart.classList.add("hidden-chart"); // Add the hidden-chart class thus hiding the chart
    }

    var chartType = document.getElementById("chartType");
    var i = chartType.selectedIndex;
    if (chartType.options[i]) {
        lineChart.style.display = "inherit";
    }
}

2-所选选项文本上的切换大小写：

在HTMLElement.text变量上，这是一个非常简单的switch：

function myFunction() {
    const currentChart = document.querySelector("#display .active-chart");
    if (currentChart) {
        currentChart.classList.remove("active-chart"); // Remove the active-chart class
        currentChart.classList.add("hidden-chart"); // Add the hidden-chart class thus hiding the chart
    }

    var chartType = document.getElementById("chartType");
    var i = chartType.selectedIndex;

    const selectedOption = chartType.options[i]; // The option the user has clicked on
    let toEnableChart;
    switch (selectedOption.text) {
        case 'Population':
            toEnableChart = lineChart;
            break;

        case 'Precipitation':
            toEnableChart = barChart;
            break;

        case 'Ethnicity':
            toEnableChart = pieChart;
            break;

        case 'Activity':
            toEnableChart = radarChart;
            break;
    }

    if (chartType.options[i]) {
        lineChart.style.display = "inherit";
    }
}

您可以使用标准的if else if else if else构造来替换该开关。

3-启用新图表

现在我们知道了要显示什么图表（toEnableChart变量，多亏了开关;并且我们知道如何显示它-还记得我们的隐藏图表和活动图表类吗？），现在是时候显示它了！

function myFunction() {
    const currentChart = document.querySelector("#display .active-chart");
    if (currentChart) {
        currentChart.classList.remove("active-chart"); // Remove the active-chart class
        currentChart.classList.add("hidden-chart"); // Add the hidden-chart class thus hiding the chart
    }

    var chartType = document.getElementById("chartType");
    var i = chartType.selectedIndex;

    const selectedOption = chartType.options[i]; // The option the user has clicked on
    let toEnableChart;
    switch (selectedOption.text) {
        case 'Population':
            toEnableChart = lineChart;
            break;

        case 'Precipitation':
            toEnableChart = barChart;
            break;

        case 'Ethnicity':
            toEnableChart = pieChart;
            break;

        case 'Activity':
            toEnableChart = radarChart;
            break;
    }

    if (toEnableChart) {
        toEnableChart.classList.remove("hidden-chart");
        toEnableChart.classList.add("active-chart");
    }

正如您可能注意到的，显示新图表是步骤#1，但向后。
如果有什么不清楚的地方，请随时发表评论。