在Confluence中调用自定义WCF C# WebService并通过JS生成图表

嘿，我来帮你搞定WCF服务调用+图表填充的问题！下面是完整的解决方案，从代码修复到跨域配置再到图表渲染一步到位：

一、先修复你的AJAX调用代码 #

你的现有代码存在错误处理不完整、图表填充逻辑缺失的问题，我给你补全并优化了版本：

<!-- 先引入jQuery（如果Confluence没自带的话） -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 以ECharts为例引入图表库，也可以换成你常用的Highcharts等 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>

<!-- 先在HTML宏里加图表容器 -->
<div id="chartContainer" style="width: 80%; height: 400px; margin: 20px auto;"></div>

<script>
function loadChartData() {
    $.ajax({
        url: "http://mydomain:port/MyService.svc/testRest",
        data: { m: "aa" }, // 用对象传参更规范，避免字符串拼接出错
        type: "GET",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            console.log("获取到的数据：", response);
            // 拿到数据后直接调用图表渲染函数
            renderChart(response);
        },
        error: function (xhr, status, error) {
            // 完善错误日志，方便排查问题
            console.error("请求失败状态：", status);
            console.error("错误详情：", error);
            console.error("服务端返回内容：", xhr.responseText);
        }
    });
}

// 图表渲染函数（以ECharts柱状图为例，可根据你的数据结构调整）
function renderChart(data) {
    var chartDom = document.getElementById('chartContainer');
    var myChart = echarts.init(chartDom);
    
    // 假设你的WCF返回数据格式是[{name: "类别1", value: 30}, {name: "类别2", value: 50}]
    var option = {
        title: { text: 'WCF服务数据可视化' },
        tooltip: { trigger: 'axis' },
        xAxis: {
            type: 'category',
            data: data.map(item => item.name)
        },
        yAxis: { type: 'value' },
        series: [{
            name: '数值',
            type: 'bar',
            data: data.map(item => item.value),
            barWidth: '60%'
        }]
    };

    myChart.setOption(option);
}

// 页面加载完成后自动触发数据加载
$(document).ready(function() {
    loadChartData();
});
</script>

二、解决跨域（CORS）问题 #

如果你的Confluence站点和WCF服务不在同一个域名下，浏览器会直接拦截跨域请求，必须在服务端配置CORS：

方法1：通过web.config配置（适用于.NET Framework） #

在WCF服务的web.config中添加以下配置：

<system.webServer>
  <httpProtocol>
    <customHeaders>
      <!-- 生产环境建议替换*为你的Confluence具体域名，比如https://your-confluence-domain.com -->
      <add name="Access-Control-Allow-Origin" value="*" />
      <add name="Access-Control-Allow-Methods" value="GET, POST, OPTIONS" />
      <add name="Access-Control-Allow-Headers" value="Content-Type" />
    </customHeaders>
  </httpProtocol>
</system.webServer>

方法2：使用[EnableCors]属性（.NET Framework 4.5+） #

1. 先安装NuGet包：Install-Package Microsoft.AspNet.WebApi.Cors
2. 在你的WCF服务类上添加属性：

using System.Web.Http.Cors;

// 生产环境替换origins为你的Confluence域名
[EnableCors(origins: "*", headers: "*", methods: "*")]
public class MyService : IMyService
{
    public List<DataModel> testRest(string m)
    {
        // 你的数据返回逻辑
        return new List<DataModel>();
    }
}

三、Confluence页面注意事项 #

• 部分Confluence环境会限制外部JS加载，如果CDN链接失效，可以把jQuery和ECharts的JS文件上传到Confluence附件，然后引用内部路径
• 确保HTML宏的权限足够，有些Confluence空间会禁用自定义JS，需要联系管理员开启

四、调试技巧 #

• 按F12打开浏览器开发者工具，在Network标签查看请求状态：
  • 404：检查WCF服务URL是否正确，确认服务已正常部署
  • 405：检查服务是否允许GET请求，或跨域配置是否生效
  • 500：查看服务端日志，排查服务方法内的异常
• 在Console标签查看打印的日志，快速定位数据解析或请求问题

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