图表js。如何在单击时滚动到部分

Question

我刚刚开始学习如何在代码中包含图表，但遇到了一些问题。

我这里有一个水平条形图，显示各国的交通数据。 图表下方有不同 id 的部分。

请帮忙...

    <script>
        var xValues = [['California', 'United States'], ['New York City', 'United States'], ['London','United Kingdom'], ['Paris','France'], ['Shanghai', 'China'], ['Hong Kong'], ['Kuala Lumpur', 'Malaysia'], "Singapore"];

Chart.defaults.global.backgroundColor = '#f9f9f9'
Chart.defaults.global.defaultFontColor = '#f9f9f9'
const config = {
    
    type: "horizontalBar",

    data: {
        labels: xValues,
        datasets: [
            {
                label: 'Bicycle/Electric Bikes',
                backgroundColor: "rgba(160, 206, 128, 0.8)",
                data: [0.8, 1.5, 5.6, 3.25, 20, 1, 0.3, 2.08],
                maxBarThickness: 30,
                link: '#data-bicycle'
            },
            {
                label: 'Electric Car',
                backgroundColor: "rgba(249, 199, 132, 0.8)",
                data: [25, 2.5, 34.3, 25.26, 4.87, 1.1, 1.15, 0.2], 
                maxBarThickness: 30,
                link: '#data-electric-car'
            },
            {
                label: 'Electric Bus/Trolley Bus',
                backgroundColor: "rgba(237, 106, 90, 0.8)",
                data: [4.7, 12, 5.15, 7.64, 11.11, 0.83, 0.77, 0.79], 
                maxBarThickness: 30,
                link: '#data-bus'
            },
            {
                label: 'Tram',
                backgroundColor: "rgba(205, 160, 204, 0.8)",
                data: [2, 0.08, 1.81, 16.3, 0, 3.1, 0, 0], 
                maxBarThickness: 30,
                link: '#data-tram'
            },
            {
                label: 'Metro/Trains',
                backgroundColor: "rgba(81, 163, 163, 0.8)",
                data: [2.68, 66.59, 49.22, 32.6, 49.39, 56, 19.14, 62.4], 
                maxBarThickness: 30,
                link: '#data-train'
            },
            {
                label: 'Electric Ships',
                backgroundColor: "rgba(52, 107, 134, 0.8)",
                data: [0.002, 0.24, 0.16, 0.06, 0.04, 0.2, 0, 0.02], 
                maxBarThickness: 30,
                link: '#data-ship'
            },
            {
                label: 'Others',
                backgroundColor: "rgba(249, 249, 249, 0.2)",
                data: [64.818, 17.09, 3.76, 14.89, 14.59, 37.77, 78.64, 34.51],
                maxBarThickness: 30,
                link: '#data-other'
            }
        ],
    },

    options: {
        legend: {
            display: true,
        },

        title: {
            display: false,
        },

        scales: {
            xAxes: [{
                ticks: {
                    min: 0,
                    max: 100,
                },
                type: 'linear',
                stacked: true,
                gridLines: {
                    color: 'rgba(255, 255, 255, 0.1)'
                },
                afterTickToLabelConversion : function(q){
                    for(var tick in q.ticks){
                        q.ticks[tick] += '%';
                    }
                },
            }],
            yAxes: [{
                stacked: true,
                gridLines: {
                    display: false,
                },
            }],
        },
        responsive: true,
        maintainAspectRatio: false,
    }
};

document.addEventListener('DOMContentLoaded', function() {
    const ctx = document.getElementById('hero-chart');
    const heroChart = new Chart(ctx, config);

    function clickHandler(event) {
        const firstPoint = heroChart.getElementsAtEventForMode(event, 'nearest', { intersect: true }, true)[0];
        if (firstPoint) {
            const dataset = heroChart.data.datasets[firstPoint.datasetIndex];
            const link = dataset.link;
            if (link) {
                scrollToSection(link);
            }
        }
    }

    ctx.onclick = clickHandler;

    function scrollToSection(sectionId) {
        const section = document.querySelector(sectionId);
        if (section) {
            section.scrollIntoView({ behavior: 'smooth' });
        }
    }
});
 
    </script>

<section id="data-bicycle"></section>

<section id="data-car"></section>

<section id="data-bus"></section>

<section id="data-tram"></section>

<section id="data-trains"></section>

<section id="data-ship"></section>

<section id="data-other"></section>

我尝试在单击栏时使页面向下滚动到特定部分

我尝试了 24 小时不同的代码，但似乎没有任何效果符合预期

Answer 1

该问题可能是由于您在数据集的链接属性中指定的 id 与部分的类之间不匹配造成的。

在数据集中，您已将链接指定为

#data-bicycle

、

#data-electric-car

等。

#

符号通常用于在 JavaScript 中按 id 选择元素。但是，在 HTML 中，您已使用

data-bicycle

、

data-car

等类（而不是 ids）指定了相应的部分。

要解决此问题，您可以更改部分以使用 ids 而不是类，或者更改链接属性以按类而不是 id 选择。

<section id="data-bicycle"></section>
<section id="data-electric-car"></section>
<section id="data-bus"></section>
<section id="data-tram"></section>
<section id="data-train"></section>
<section id="data-ship"></section>
<section id="data-other"></section>