Javascript 在代码后面使用 Literal

Question

我正在尝试在后面的代码中编写我的 js 代码。我已经定义了一个名为“contentPie”的文字，然后将 javascript 代码放在它的文本中。但它不起作用。

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 >";

P.s，这个 javascript 代码是一个饼图模板。这是来源：https://canvasjs.com/html5-javascript-pie-chart/。

顺便说一句，我不确定，但 > 这些标签可能是错误的。如果我犯了错误，请告诉我。

Answer 1

不太清楚在服务器端编写客户端代码的原因。通常，这样做没有必要也不是一个好习惯。

但是根据您自己的情况，我认为您正在尝试将一些服务器端值传递给 javascript 代码，以便可以呈现饼图。

有几种方法可以做到这一点

使用服务器端标签

var chartContainer = <%= chartContainerFromCodeBehind %>;
<script>window.onload = function() { // your javascript code... }</ script >

使用ClientScriptManager 类

var yourJs = "window.onload = function() { ... }";
Page.ClientScript.RegisterStartupScript(GetType(), "yourKey", yourJsCode,true);

Answer 2

在文本前面加上@，一切都很好。不需要\" 在“'pie'”中使用单引号（'）而不是双引号（“）

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 >";