Google Visualization API：保存与恢复修改后的ChartWrapper对象

核心思路 #

通过localStorage存储用户修改后的ChartWrapper对象的JSON字符串，页面初始化时优先读取本地存储的配置；如果没有保存过自定义配置，再使用预设的默认图表设置。

完整代码实现 #

1. 保存修改后的ChartWrapper到本地存储 #

你已经完成了核心的保存逻辑，这里再梳理下完整的保存函数（建议绑定到Chart Editor的保存按钮点击事件）：

function saveChartConfig() {
  const chart = chartEditor.getChartWrapper();
  // 将ChartWrapper转为JSON字符串存入localStorage
  localStorage.setItem('chartWrapper', JSON.stringify(chart));
  redrawChart();
}

2. 页面初始化时加载本地存储的图表配置 #

在Google Visualization库加载完成后，添加读取本地配置的逻辑，替代直接初始化默认图表：

// 假设data是你已准备好的图表数据源
function initChart() {
  let savedChartConfig = localStorage.getItem('chartWrapper');
  let chart;

  if (savedChartConfig) {
    // 解析本地存储的JSON，还原为ChartWrapper对象
    chart = new google.visualization.ChartWrapper(JSON.parse(savedChartConfig));
    // 确保容器ID与页面元素一致（避免存储时配置丢失）
    chart.setContainerId('chart_div');
    // 重新绑定数据源（如果data是动态生成的，需确保此时data已就绪）
    chart.setDataTable(data);
  } else {
    // 使用默认图表配置初始化
    chart = new google.visualization.ChartWrapper({
      chartType: 'LineChart',
      containerId: 'chart_div',
      dataTable: data,
      options: {
        title: '@Html.Raw(Model.KeyIndicatorName)',
        hAxis: {
          slantedText: true,
          slantedTextAngle: 30,
          title: 'Reporting Period'
        },
        vAxis: {
          title: '@Model.XAxis'
        }
        // 补充你的其他默认配置项...
      }
    });
  }

  // 绘制最终图表
  chart.draw();
}

// 确保在Google Visualization库加载完成后执行初始化
google.charts.setOnLoadCallback(initChart);

3. 关键注意事项 #

• 数据源同步：如果你的data是从后端动态获取的，要确保在调用initChart前，data已经加载完成，避免图表无数据显示。
• 配置兼容性：ChartWrapper的核心配置（图表类型、样式选项等）都支持JSON序列化，但如果有自定义函数类的配置，会被自动忽略，这类配置建议单独处理。
• 容器ID校验：如果页面容器ID有变更，需要手动调用setContainerId确保图表能正确渲染到目标元素中。

测试验证步骤 #

1. 打开页面，使用Chart Editor修改图表类型、样式等配置。
2. 触发saveChartConfig()保存配置（比如点击编辑器的保存按钮）。
3. 刷新页面，确认图表显示的是你最后修改的自定义配置，而非默认的折线图。

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