如何实现显示所有x轴值、可下拉切换维度的世界杯统计柱状图

完整调整后可运行代码 #

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css" />
    <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
    <header>
        <h1>Exploring FIFA World Cup Statistics</h1>
    </header>
    <div id="bar-chart" class="view">
        <h2 class="">Bar Chart</h2>
        <div id="plot-selector">
            <label>Plot:</label>
            <select id="dataset" onchange="chooseData()">
                <option selected value="attendance">平均上座率</option>
                <option value="teams">参赛队伍数量</option>
                <option value="matches">比赛总场数</option>
                <option value="goals">进球总数</option>
            </select>
        </div>
    </div>
    <div id="container" style="width:100%;max-width:900px;height:500px;"></div>
    <script>
    // 全局存储图表实例和全量数据集
    let chart;
    const worldCupData = [
        { year: "1930", attendance: 32808, teams:13, matches:18, goals:70 },
        { year: "1934", attendance: 21352, teams:16, matches:17, goals:70 },
        { year: "1938", attendance: 20872, teams:15, matches:18, goals:84 },
        { year: "1950", attendance: 47511, teams:13, matches:22, goals:88 },
        { year: "1954", attendance: 29561, teams:16, matches:26, goals:140 },
        { year: "1958", attendance: 23423, teams:16, matches:35, goals:126 },
        { year: "1962", attendance: 27911, teams:16, matches:32, goals:89 },
        { year: "1966", attendance: 48847, teams:16, matches:32, goals:89 },
        { year: "1970", attendance: 50124, teams:16, matches:32, goals:95 },
        { year: "1974", attendance: 49098, teams:16, matches:38, goals:97 },
        { year: "1978", attendance: 40678, teams:16, matches:38, goals:102 },
        { year: "1982", attendance: 40571, teams:24, matches:52, goals:146 },
        { year: "1986", attendance: 46039, teams:24, matches:52, goals:132 },
        { year: "1990", attendance: 48388, teams:24, matches:52, goals:115 },
        { year: "1994", attendance: 68991, teams:24, matches:52, goals:141 },
        { year: "1998", attendance: 43517, teams:32, matches:64, goals:171 },
        { year: "2002", attendance: 42268, teams:32, matches:64, goals:161 },
        { year: "2006", attendance: 52491, teams:32, matches:64, goals:147 },
        { year: "2010", attendance: 49669, teams:32, matches:64, goals:145 },
        { year: "2014", attendance: 52918, teams:32, matches:64, goals:171 }
    ];
    window.onload = function () {
        chart = new CanvasJS.Chart("container", {
            animationEnabled: true,
            theme: "light1",
            axisX: {
                title: "世界杯举办年份",
                interval: 1, // 强制显示所有X轴标签
                labelAngle: -45 // 倾斜标签避免重叠
            },
            axisY: {
                title: "平均上座率"
            },
            data: [{
                type: "column",
                showInLegend: true,
                legendMarkerColor: "grey",
                legendText: "年份",
                dataPoints: worldCupData.map(item => ({y: item.attendance, label: item.year}))
            }]
        });
        chart.render();
    }
    // 按需更新柱状图的核心函数
    function updateBarChart(selectedDimension) {
        const dimensionMap = {
            attendance: "平均上座率",
            teams: "参赛队伍数量",
            matches: "比赛总场数",
            goals: "进球总数"
        };
        // 更新Y轴标题
        chart.axisY[0].set("title", dimensionMap[selectedDimension]);
        // 替换对应维度的数据点
        const newDataPoints = worldCupData.map(item => ({y: item[selectedDimension], label: item.year}));
        chart.data[0].set("dataPoints", newDataPoints);
        // 重新渲染图表
        chart.render();
    }
    // 下拉框变化触发函数
    function chooseData() {
        const selected = document.getElementById("dataset").value;
        updateBarChart(selected);
    }
    </script>
</body>

核心调整说明 #

• 全局存储了所有维度的世界杯历史数据，方便切换时直接读取
• 新增了updateBarChart(selectedDimension)函数，实现维度切换、Y轴标题更新、数据替换和图表重渲染的完整逻辑
• 新增了chooseData()函数作为下拉框的事件触发入口，联动更新图表
• 配置了X轴interval=1属性，保证所有年份标签完整展示不被省略，同时倾斜标签避免文字重叠
• 给容器设置了固定高度，避免图表渲染异常

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