基于分层阶段式布局实现多数据柱状极坐标图表切换是否可行？

嗨Andrew，当然可以实现这种多数据柱状极坐标图表的切换！你现在的代码已经搭好了基础的按钮和图表容器框架，只是缺少了按钮点击后切换图表数据的核心逻辑，我帮你调整了代码，让每个按钮都能触发对应的数据更新，完美实现你想要的效果：

关键修改点说明 #

• 把图表的初始化、数据渲染和样式配置封装成了一个可复用的函数 renderChart(dataGroups, chartTitle)，这样不同按钮可以传入不同的数据集和标题
• 给每个按钮绑定了正确的点击事件，调用封装好的渲染函数，传入对应的数据组和标题文本
• 保留了你原来设置的所有图表样式（标题背景、颜色、图例位置等），确保切换后的图表风格统一

修改后的完整代码 #

<div id="anychart-embed-ZYGqlpO0" class="anychart-embed anychart-embed-ZYGqlpO0">

<script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-polar.min.js"></script>

<div id="ac_style_ZYGqlpO0" style="display:none;">
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
button {
margin: 10px 0 0 10px;
}
</div>

<script>(function(){
function ac_add_to_head(el){
var head = document.getElementsByTagName('head')[0];
head.insertBefore(el,head.firstChild);
}
function ac_add_link(url){
var el = document.createElement('link');
el.rel='stylesheet';el.type='text/css';el.media='all';el.href=url;
ac_add_to_head(el);
}
function ac_add_style(css){
var ac_style = document.createElement('style');
if (ac_style.styleSheet) ac_style.styleSheet.cssText = css;
else ac_style.appendChild(document.createTextNode(css));
ac_add_to_head(ac_style);
}
ac_add_link('https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css');
ac_add_link('https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css');
ac_add_style(document.getElementById("ac_style_ZYGqlpO0").innerHTML);
ac_add_style(".anychart-embed-ZYGqlpO0{width:600px;height:450px;}");
})();</script>

<button onclick="renderOverallSummary()">Overall summary</button>
<button onclick="renderAAA()">AAAAA</button>
<button onclick="renderBBB()">BBBBB</button>
<button onclick="renderCCC()">CCCCC</button>

<div id="container"></div>

<script>
// 封装图表渲染函数，接收数据组和标题文本
function renderChart(dataGroups, chartTitle) {
    // 清除容器内现有图表，避免重复渲染
    document.getElementById('container').innerHTML = '';
    
    // 创建新的极坐标图表
    var chart = anychart.polar();
    
    // 遍历数据组，创建对应的柱状系列
    dataGroups.forEach((data, index) => {
        var series = chart.column(data.values);
        series.name(data.name);
        // 保留原有的系列颜色配置
        var colors = ['#83B8AE', '#DC911B', '#DDD65A'];
        series.color(colors[index % colors.length]);
    });
    
    // 图表标题配置
    var title = chart.title();
    title.enabled(true);
    title.padding(5);
    title.text(chartTitle);
    title.fontSize(20).fontColor('black');
    
    // 标题背景配置
    var titleBackground = chart.title().background();
    titleBackground.enabled(true);
    titleBackground.fill("#FFD700");
    titleBackground.stroke("#D8D8D8");
    titleBackground.cornerType("round");
    titleBackground.corners(10);
    
    // 其他图表基础配置
    chart.sortPointsByX(true);
    chart.yAxis(false);
    chart.tooltip().valuePrefix('Score:');
    chart.xScale('ordinal');
    chart.container('container');
    
    // 图例配置
    chart.legend().enabled(true).itemsLayout('vertical').position('right').fontColor('black');
    
    // X轴标签配置
    var labels = chart.xAxis().labels();
    labels.fontSize(20).fontColor('black');
    
    chart.padding(50, 0, 0, 0);
    // 绘制图表
    chart.draw();
}

// 各按钮对应的数据集和渲染函数
function renderOverallSummary() {
    var dataGroups = [
        { name: '2023', values: [
            { x: 'Aaaaaa', value: 5.2 },
            { x: 'Bbbbbb', value: 5 },
            { x: 'Cccccc', value: 5.6 },
            { x: 'Dddddd', value: 4.4 },
            { x: 'Eeeeee', value: 4.9 },
            { x: 'Ffffff', value: 3.9 }
        ]},
        { name: '2018', values: [
            { x: 'Aaaaaa', value: 4 },
            { x: 'Bbbbbb', value: 4.3 },
            { x: 'Cccccc', value: 5.2 },
            { x: 'Dddddd', value: 3.7 },
            { x: 'Eeeeee', value: 4.6 },
            { x: 'Ffffff', value: 3.9 }
        ]},
        { name: '2015', values: [
            { x: 'Aaaaaa', value: 4.4 },
            { x: 'Bbbbbb', value: 4.2 },
            { x: 'Cccccc', value: 5 },
            { x: 'Dddddd', value: 3.5 },
            { x: 'Eeeeee', value: 4 },
            { x: 'Ffffff', value: 0 }
        ]}
    ];
    renderChart(dataGroups, "Xxxxxxxxxxxxx yyyyyyyyyyy");
}

function renderAAA() {
    var dataGroups = [
        { name: '2023', values: [
            { x: 'Aaaaaa', value: 6.2 },
            { x: 'Bbbbbb', value: 5.8 },
            { x: 'Cccccc', value: 6.1 },
            { x: 'Dddddd', value: 5.4 },
            { x: 'Eeeeee', value: 5.9 },
            { x: 'Ffffff', value: 4.9 }
        ]},
        { name: '2018', values: [
            { x: 'Aaaaaa', value: 5.1 },
            { x: 'Bbbbbb', value: 5.3 },
            { x: 'Cccccc', value: 5.8 },
            { x: 'Dddddd', value: 4.7 },
            { x: 'Eeeeee', value: 5.6 },
            { x: 'Ffffff', value: 4.9 }
        ]}
    ];
    renderChart(dataGroups, "AAAAA 数据汇总");
}

function renderBBB() {
    var dataGroups = [
        { name: '2023', values: [
            { x: 'Aaaaaa', value: 4.2 },
            { x: 'Bbbbbb', value: 4.0 },
            { x: 'Cccccc', value: 4.6 },
            { x: 'Dddddd', value: 3.4 },
            { x: 'Eeeeee', value: 3.9 },
            { x: 'Ffffff', value: 2.9 }
        ]}
    ];
    renderChart(dataGroups, "BBBBB 数据汇总");
}

function renderCCC() {
    var dataGroups = [
        { name: '2023', values: [
            { x: 'Aaaaaa', value: 5.8 },
            { x: 'Bbbbbb', value: 6.0 },
            { x: 'Cccccc', value: 6.2 },
            { x: 'Dddddd', value: 5.6 },
            { x: 'Eeeeee', value: 5.9 },
            { x: 'Ffffff', value: 5.0 }
        ]},
        { name: '2018', values: [
            { x: 'Aaaaaa', value: 4.8 },
            { x: 'Bbbbbb', value: 5.0 },
            { x: 'Cccccc', value: 5.2 },
            { x: 'Dddddd', value: 4.6 },
            { x: 'Eeeeee', value: 4.9 },
            { x: 'Ffffff', value: 4.0 }
        ]},
        { name: '2015', values: [
            { x: 'Aaaaaa', value: 3.8 },
            { x: 'Bbbbbb', value: 4.0 },
            { x: 'Cccccc', value: 4.2 },
            { x: 'Dddddd', value: 3.6 },
            { x: 'Eeeeee', value: 3.9 },
            { x: 'Ffffff', value: 3.0 }
        ]}
    ];
    renderChart(dataGroups, "CCCCC 数据汇总");
}

// 页面加载完成后默认渲染Overall summary图表
anychart.onDocumentReady(function () {
    renderOverallSummary();
});
</script>
</div>

你可以根据实际需求修改每个函数里的数据集和标题文本，点击对应按钮就能切换到不同的柱状极坐标图表啦！

备注：内容来源于stack exchange，提问作者Andrew