后台代码中通过Literal嵌入CanvasJS饼图JS代码失效问题求助

看起来你的代码主要在转义字符处理、控件输出模式和字符串拼接这几个地方出了问题，我帮你一步步拆解修复：

1. 核心问题分析 #

（1）Script标签的转义错误 #

你手动用<和>转义了<script>标签，但如果你的Literal控件默认模式是Transform或Encode，会导致最终页面输出的是<script>而非真正的脚本标签——浏览器根本识别不了这是一段JS代码。另外你写的</ script >中间有空格，也会导致标签无法正常闭合。

（2）Chart容器参数的拼接错误 #

你拼接chartContainer时没有加引号：

new CanvasJS.Chart(" + chartContainer + ", { ... })

如果chartContainer是DOM元素的ID字符串（比如"myChartContainer"），拼接后会变成new CanvasJS.Chart(myChartContainer, ...)——浏览器会把myChartContainer当成变量而非字符串，自然找不到对应的DOM元素。

（3）转义字符的冗余混乱 #

你混合使用了<和\"，在后台C#字符串中，只需要对双引号用\"转义即可，不需要手动转义HTML标签（除非你刻意要编码输出）。

2. 修复后的代码实现 #

首先，在ASPX页面中设置Literal的Mode为PassThrough，这样控件会直接输出原始HTML/JS，不会自动编码：

<asp:Literal ID="contentPie" runat="server" Mode="PassThrough"></asp:Literal>

然后修改后台赋值代码，用C#的逐字字符串（@前缀）让代码更易读，同时修正所有转义和拼接问题：

// 假设chartContainer是DOM容器的ID字符串，比如"chartContainer"
contentPie.Text = @"<script>
window.onload = function() {
    // 给chartContainer加上单引号，确保是字符串参数
    var chart = new CanvasJS.Chart('" + chartContainer + @"', {
        animationEnabled: true,
        data: [{
            type: ""pie"",
            startAngle: 240,
            indexLabel: ""{label} {y}"",
            dataPoints: [
                { y: 79.45, label: ""Javascript"" },
                { y: 7.31, label: ""CSS"" },
                { y: 7.06, label: ""Image"" },
                { y: 4.91, label: ""HTML"" },
                { y: 1.26, label: ""Others"" }
            ]
        }]
    });
    chart.render();
}
</script>";

如果你不习惯用逐字字符串，也可以用普通字符串转义双引号：

contentPie.Text = "<script>" +
"window.onload = function() {" +
"    var chart = new CanvasJS.Chart('" + chartContainer + "', {" +
"        animationEnabled: true," +
"        data: [{" +
"            type: \"pie\"," +
"            startAngle: 240," +
"            indexLabel: \"{label} {y}\"," +
"            dataPoints: [" +
"                { y: 79.45, label: \"Javascript\" }," +
"                { y: 7.31, label: \"CSS\" }," +
"                { y: 7.06, label: \"Image\" }," +
"                { y: 4.91, label: \"HTML\" }," +
"                { y: 1.26, label: \"Others\" }" +
"            ]" +
"        }]" +
"    });" +
"    chart.render();" +
"}" +
"</script>";

3. 额外检查项 #

别忘了在页面中引入CanvasJS的脚本库，比如在<head>标签里添加：

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

如果没有加载这个库，哪怕JS代码写得再正确，也无法渲染饼图。

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