ChartJS 尝试使用select/option标记显示不同类型的图表

ippsafx7  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(193)

第一个
我在这里试图实现的是,当我选择“population”时,线图显示出来。当我选择“precipitation”时,条形图显示出来。我意识到我缺少了某种逻辑函数。我尝试通过编写if(chartType.options[0]){lineChart.style.display =“inherit”}来使用if语句,但它最终应用于所有选项。我感谢您的提示和帮助。

cczfrluj

cczfrluj1#

以下是我的评论:

1-隐藏之前显示的图表

要做到这一点,您需要做两件事:查找当前显示的图表,并隐藏它。
让我们先添加两个类:hidden-chartactive-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,但向后。
如果有什么不清楚的地方,请随时发表评论。

相关问题