此示例使用 fromJSON 加载预定义模板。您可以在新窗口中打开示例，以在 SpreadJS设计器中查看数据图表设置。

打开设计器

window.onload = async () => {
    const loadingTip = addLoadingTip();
    const { spread, designer } = createSpreadAndDesigner();
    const res = await fetch('$DEMOROOT$/zh/sample/features/data-charts/chart-types/radial-stacked-bar/spread.json');
    await spread.fromJSON(await res.json());
    new GC.Spread.Sheets.DataCharts.DataChartConfigPanel('panel-host', spread);
    spread.getActiveSheet().dataCharts.all()[0].isSelected(true);
    loadingTip.remove();
    if (designer) {
        designer.refresh();
    }
}

function createSpreadAndDesigner() {
    const demoHost = document.getElementById('demo-host');
    if (window !== top) {
        return {
            spread: new GC.Spread.Sheets.Workbook('spread-host', { sheetCount: 1 }),
        }
    } else {
        const designer = new GC.Spread.Sheets.Designer.Designer(demoHost, undefined, undefined, { sheetCount: 1 });
        return {
            designer,
            spread: designer.getWorkbook(),
        }
    }
}
function addLoadingTip() {
    const div = document.createElement('div');
    div.style.position = 'absolute';
    div.style.inset = '0';
    div.style.display = 'flex';
    div.style.alignItems = 'center';
    div.style.justifyContent = 'center';
    div.style.background = 'white';
    div.style.zIndex = '100';
    div.textContent = '加载模板及数据……';
    document.body.appendChild(div);
    return div;
}

SpreadJS 在线示例

极坐标放射堆叠柱状图